跨域问题原因及解决方案大全 - Go语言中文社区

跨域问题原因及解决方案大全


1.跨域问题的出现需要同时满足哪些条件

  1. 浏览器本身对跨域返回结果进行检测,进行拦截。
  2. 跨域请求。
  3. 请求类型是XMLHttpRequest请求。关于请求类型,可F12自行查看。

2.针对跨域出现的问题有一下解决思路

1.修改浏览器设置

2.使其请求类型不是XMLHttpRequest

3.调用方修改

4.被调用方修改     

以下会针对上述4种解决方案  一次阐述。

3.修改浏览器设置

打开浏览器安装路径,可用cmd打开,同时增加浏览器启动参数--disable-web-security。但是考虑到在所有客户端访浏览器都要修改,代价太大,不建议使用。

4.使其请求类型不是XMLHttpRequest

常用的解决方案是使用jsonp,进行调用,网上jsonp方案多且细。这里不再赘述。但是jsonp的解决方案有一些显见弊端

1.jsonp所调用的方法只能是Get类型

2.jsonp调用需要服务端编写代码,跟其约定参数,代码容错性低。

5.补充简单请求和非简单请求的知识点

1.简单请求常见的有:GET HEAD POST 其对应的请求header里面无自定义头,Content-Type为:text/plain multipart/form-data

application/x-www-form-urlencoded 的一种。

2.常见的非简单请求有PUT DELETE方法的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求。

3.非简单请求在发起请求后,会先预检一次(OPTIONS),预检通过后,才会发起真正的请求。如下图:

此时postJson为发送json格式的ajax请求。

6.被调用方解决

1.首先了解前后台分离项目的基本架构

基本调用流程:调用方的client请求到被调用方的Nginx服务器,Nginx将请求转发到自身的tomcat集群。

所以被调用方解决方案一般有两种:

  • 在tomcat服务器对跨域请求进行响应设置
  • 在Nginx对跨域请求进行响应设置

2.对tomcat服务器对跨域请求进行设置,我用的项目为SpringBoot,所有设置如下

@SpringBootApplication
public class AjaxserverApplication {

    public static void main(String[] args) {
        SpringApplication.run(AjaxserverApplication.class, args);
    }

    @Bean
    public FilterRegistrationBean filterRegistrationBean(){
        FilterRegistrationBean bean=new FilterRegistrationBean();
        bean.setUrlPatterns(Arrays.asList("/*"));
        bean.setFilter(new CrosFilter());
        return bean;
    }
}

在启动上注入拦截器。拦截器代码如下   不要恶心,哈哈,依次解读,也算对http请求有个初步了解

 @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse=(HttpServletResponse)servletResponse;
        HttpServletRequest httpServletRequest=(HttpServletRequest)servletRequest;
        String origin = httpServletRequest.getHeader("Origin");
        if(!StringUtils.isEmpty(origin)){
            httpServletResponse.addHeader("Access-Control-Allow-Origin",origin);
        }
        String headers=httpServletRequest.getHeader("Access-Control-Request-Headers");
        if(!StringUtils.isEmpty(headers)){
            httpServletResponse.addHeader("Access-Control-Allow-Headers",headers);
        }
        httpServletResponse.addHeader("Access-Control-Allow-Methods","GET");
        httpServletResponse.addHeader("Access-Control-Max-Age","3600");
        httpServletResponse.addHeader("Access-Control-Allow-Credentials","true");

        filterChain.doFilter(servletRequest,servletResponse);
    }

 

  • httpServletResponse.addHeader("Access-Control-Allow-Origin",origin);设置允许跨域的地址是什么,请求头中的Origin存的是调用方地址。
  • httpServletResponse.addHeader("Access-Control-Allow-Headers",headers); 有时调用方发送的请求中headers里面会自定义头信息,那么被调用方也应该在响应中把headers返回回去。
  • httpServletResponse.addHeader("Access-Control-Allow-Methods","GET"); 允许跨域调用的方法是什么类型。
  • httpServletResponse.addHeader("Access-Control-Max-Age","3600"); 非简单请求,只要第一次通过OPTIONS检查 在1小时之内不会在调用OPTIONS进行检测
  • httpServletResponse.addHeader("Access-Control-Allow-Credentials","true");带有Cookie的跨域请求,此值必须设置为true。

有时为了简便,也可以设置,允许跨域的地址为所有,允许跨域的方法为所有,如下,但是不建议使用

httpServletResponse.addHeader("Access-Control-Allow-Origin","*");
httpServletResponse.addHeader("Access-Control-Allow-Methods","*");

3.在被调用方的Nginx对跨域请求进行响应设置

此时Nginx上的设置与过滤器设置内容一样,都在是被调用方的响应头信息中添加参数,防止跨域问题。

但是值得注意的是Nginx的书写格式,值中不允许出现大写,且所有横杠都应替换为低杠。if判断后必须留有空格。可以用过nginx.exe -t 进行配置文件的校验工作。

7.调用方解决方案

  1. 配置调用方的Nginx服务器,内容如下

调用方为8081 被调用方为8080。以前,跨域调用get方法路径为:http://localhost:8080/test/get 配置完调用方Nginx之后请求路径更改为http://a.com/ajaxserver/get即可。

调用方解决是把跨域请求写为相对路径,被调用方解决跨域请求是绝对路径,被调用方在响应信息中填写设置。

8.Spring框架

如果你使用的Spring框架,在跨域调用的方法或者方法所在的类上加上@CrossOrigin 即可。其实现原理,可进源码查看,设置与上几乎无二。

目录

1.跨域问题的出现需要同时满足哪些条件

2.针对跨域出现的问题有一下解决思路

3.修改浏览器设置  

4.使其请求类型不是XMLHttpRequest

5.补充简单请求和非简单请求的知识点

6.被调用方解决


版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/u014606412/article/details/81747408
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-09-01 17:21:37
  • 阅读 ( 1183 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢