浏览器跨域请求问题解决方法

深碍√TFBOYSˉ_ 2022-05-24 02:45 379阅读 0赞

# 浏览器 跨域请求问题解决方法 #

使用框架：前台AngularJs,后台：Restful+gradle  
此方法主要用于前后分离的结构，浏览器火狐：60.0.1

如果你只是想简单点，可以直接使用chrome浏览器，可以直接参考[chrome谷歌浏览器Ajax跨域调试问题][chrome_Ajax],不用管它是针对ajax还是其他，都可以使用。因为这是浏览器的配置，与你的前后台无关。其他浏览器是没法用的。

## 跨域问题怎么出现的？ ##

当浏览器通过 aaa.com 访问 bbb.com时，或者前台和后台不在同一域名下，就会产生跨域问题，  
跨域问题是浏览器产生的，浏览器这样设置是为了访问的安全性，本质上与你的前台关系不大，大多是后台进行处理。  
火狐现在好像无法通过浏览器配置来允许跨域请求。

## 浏览器是如何处理跨域的 ##

首先服务器会发送一个预请求 **OPTIONS**到服务器，服务器处理这个请求（注意这里的服务器处理请求的方法不是实际访问的方法，而是专门用于处理OPTIONS的），判断是否允许进行跨域，将结果加入header返回给浏览器，浏览器解析响应头，如果服务器允许进行跨域，则才会发送真正的get/post请求。  
Firefox怎么查看OPtions请求![sHkN923.png][]还不请求请自行百度。  
浏览器请求服务器的options请求头解析：

Host: 192.168.0.69:18080
    User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
    Accept-Encoding: gzip, deflate
    Access-Control-Request-Method: GET
    Access-Control-Request-Headers: cache-control,pragma,x-requested-with
    Origin: http://localhost:9000

Origin:是客户端的地址  
Host: 是请求服务器的地址  
后台可以通过 Origin来判断是否允许请求

## 问题的解决 ##

先学习了解cors原理和restful  
**参考文档**：1.[用 Java 技术创建 RESTful Web 服务][Java _ RESTful Web]，了解restful编程规范  
2.[RESTful API 设计指南][RESTful API]这个链接让我知道了@OPTIONS这个注解，以前只用过@GET、@POST。  
@OPTIONS:获取信息，关于资源的哪些属性是客户端可以改变的。  
3.[RESTEasy @path 与正则表达式映射][RESTEasy _path] 如果你解决了跨域问题，可以通过这个，让一组资源用一个方法处理options请求

### 原理 ###

使用的是**跨域资源共享 CORS**方法，这也是服务器会发送OPTIONS预请求的基础。  
因为restful每个方法都指定了请求类型是GET还是post，所以如果浏览器发送了一个OPTIONS类型的请求，原来的方法实际上是没有进入（因为类型不匹配）。比如你的请求为get请求’ 192.168.0.111:8080/aaa/bbb?a=1&b=2’,实际上\*\*预请求\*\*OPTIONS也是访问的这个链接，只不过类型不匹配没有进入。  
所有我们需要一个新的方法来专门处理OPTIONS请求。

### 解决方法 ###

具体方法如下:

/** * 进行跨域请求的配置 * @param response * @param httpRequest * @return */
        @OPTIONS
        @Path("/bbb")
        public Response MysqlConnectionTester(@Context HttpServletResponse response,@Context HttpServletRequest httpRequest) {
            log.info("-----------------进行跨域请求的配置进入-----------------");//日志打印
    // String origin = httpRequest.getHeader("Origin"); //获取跨域连接
            response.addHeader("Access-Control-Allow-Origin", "*");//允许所有域名的脚本访问该资源。
            response.addHeader("ccess-Control-Allow-Credentials", "true");
            response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.addHeader("Content-Type", "text/html; charset=utf-8");
            response.addHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");  
            return Response.status(200).build();
        }
    
        /** * 实际请求方法 * @param response * @return */
        @GET
        @Path("/bbb")
        public Response discountActive(@Context HttpServletResponse response) {
            JSONObject ret = new JSONObject();
            ret.put("code", "500");
            ret.put("message", "数据查询完毕");
            return ResponseBuilder.error(ret.toString());
        }

上述请求的链接相同，但是请求类型不同。  
这样就可以了，OPTIONS的发送和接收都是浏览器的行为，与你项目是无关的，所以前端是不需要修改的，只需要让服务器能正确把OPTIONS的结果发送出去。

解决完成后OPTIONS响应头内容:

Access-Control-Allow-Headers    :Origin, No-Cache, X-Requested-…Type, X-E4M-With,userId,token
    Access-Control-Allow-Methods    :POST, GET, OPTIONS, DELETE
    Access-Control-Allow-Origin :*
    ccess-Control-Allow-Credentials :true
    Content-Length  :0
    Content-Type    :text/html;charset=utf-8
    Date    :Fri, 18 May 2018 07:50:14 GMT
    Server  :Apache-Coyote/1.1

多出来Access-Control的内容。

### 扩展 ###

让一组资源链接的OPTIONS预请求使用一个方法处理:

/** * 进行跨域请求的配置 * @param response * @param httpRequest * @return */
        @OPTIONS
        @Path("/{var}")
        public Response MysqlConnectionTester(@Context HttpServletResponse response,@Context HttpServletRequest httpRequest) {
            log.info("-----------------进行跨域请求的配置进入-----------------");//日志打印
    // String origin = httpRequest.getHeader("Origin"); //获取跨域连接
            response.addHeader("Access-Control-Allow-Origin", "*");//允许所有域名的脚本访问该资源。
            response.addHeader("ccess-Control-Allow-Credentials", "true");
            response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.addHeader("Content-Type", "text/html; charset=utf-8");
            response.addHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");  
            return Response.status(200).build();
        }

原理使用Path通配符，具体原理见参考文档 \[3\] (在上面)。

2018-05-18创建

[chrome_Ajax]: https://blog.csdn.net/u010035608/article/details/51158904
[sHkN923.png]: https://i.imgur.com/sHkN923.png
[Java _ RESTful Web]: https://www.cnblogs.com/zhangliwei/p/8284079.html
[RESTful API]: http://www.ruanyifeng.com/blog/2014/05/restful_api.html
[RESTEasy _path]: http://flycun2.iteye.com/blog/1894553