Http--跨域请求

在浏览器中，与当前页面不同域名的url是不允许访问的，这是浏览器端的限制，后端设置Access-Control-Allow-Origin为发起发的URL即可，相当于开放给这个URL请求（注意，必须要和浏览器中的URl相同，如请求方为127.0.0.1，Access-Control-Allow-Origin设置为localhost是不行的）
如果是允许多个URL请求，可以在Request中获取URL，判断是否允许请求，如果允许，将该url设置到Access-Control-Allow-Origin的值。如下详细的梳理各个点即解决方案

分为简单请求和非简单请求，如果为简单请求，将请求发送过去，后台会响应，但是数据返回到浏览器的时候，检查Origin字段，发现与当前域名不相同。如果为非简单请求，将会发送一个预请求，method为OPTIONS,检查通过了才会发送正常的请求。
简单请求
方法GET，HEAD，POST
Header：无自定义，Content-Type为以下几种：text/plain、multipart/form-data、application/x-www-form-urlcoded
发送一个简单请求：

$.get("http://127.0.0.1:6001/user/getUserInformation?userId=1",function(data,status){console.log(data);});

后台得到了响应，但是浏览器端没有数据响应
浏览器控制台报如下错误：

from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

4.1.2 非简单请求
方法：PUT、delete方法的AJAX请求
发送JSON格式的ajax请求
带自定义头的ajax请求。

$.ajax({type: "POST",contentType: "application/json; charset=utf-8",data:JSON.stringify({"username":"123","password":"123"}),url: "http://127.0.0.1:6001/user/addUserInfo",success: function(result) {console.log(result);`在这里插入代码片`}});

允许方法：GET、HEAD、POST，允许Content-Type：Text/plain、Multipart/form-data、Application/x-www-form-urlencoded
预请求

from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
the server responded with a status of 403 ()

通过在后台添加预检查命令，根据method为options判断即可解决

@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) req;HttpServletResponse response = (HttpServletResponse) resp;logger.info("method:"+request.getMethod());//允许跨域response.setHeader("Access-Control-Allow-Origin","*");//告诉请求端，哪些自定义的头字段可以被允许添加response.setHeader("Access-Control-Allow-Headers","X-Test-Cors");//CORS请求预请求时不允许设置Content-Type，在预请求时告诉请求端可以response.setHeader("Access-Control-Allow-Headers","content-type");//允许跨域请求的最长时间,指定时间内不需要发送预请求过来。response.setHeader("Access-Controller-Max-Age","1000");if("OPTIONS".equals(request.getMethod())){//跨域请求中的非简单请求发送的预请求特殊处理response.setStatus(200);}else{chain.doFilter(req,resp);}
}

设置缓存预检时间，在指定的时间内不需要发送预请求

response.setHeader("Access-Controller-Max-Age","1000");

带Cookie的跨域请求
只能读到本域的Cookie，不能读到其他域的Cookie。
Cookie应该添加到被调用方。如在8080下添加Cookie信息，但是在8081下跨域请求8080的服务。
请求方式：

$.ajax({type: "get",contentType: "application/json; charset=utf-8",url: "http://127.0.0.1:8080/user/getCookie",xhrFields:{//请求时携带CookiewithCredentials:true},success: function(result) {console.log(result);}
});

在控制台设置Cookie

document.cookie='cookie1=dema'

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

携带Cookie的跨域需要将Access-Control-Allow-Origin设置为发送请求的域，不能设置为*
如下，在8081下跨域请求8080的接口，在8080的服务端，设置Access-Control-Allow-Origin的值为允许url为8081的源url跨域访问。

/允许跨域
response.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:8081");

然后控制台出现如下的问题：

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

8080服务端设置如下即可：

response.setHeader("Access-Control-Allow-Credentials","true");

总结：携带Cookie的跨域需要将Access-Control-Allow-Origin设置为发送请求的域，不能设置为*,同时在服务端设置Access-Control-Allow-Credentials为true
如果需要设置所有的请求都能跨域请求，可以通过获取头部的Origin字段然后设置为Access-Control-Allow-Origin的值即可

带自定义头的跨域

Access to XMLHttpRequest at 'http://127.0.0.1:8080/user/getHeader' from origin 'http://127.0.0.1:8081' has been blocked by CORS policy: Request header field x-header2 is not allowed by Access-Control-Allow-Headers in preflight response.

预请求返回的信息不支持自定义的头信息，需要修改Access-Control-Allow-Headers的字段信息，

response.setHeader("Access-Control-Allow-Headers","content-type,x-header1,x-header2");

//不写死的方法,支持所有的自定义的头，根据请求信息，返回
String headers = request.getHeader("Access-Control-Request-Headers");
if(headers!=null){response.addHeader("Access-Control-Allow-Headers",headers);
}

跨域请求的Nginx的方案

server{listen 80;server_name b.com;location /{proxy_pass http://localhost:8080/;add_header Access-Control-Allow-Methods *;add_header Access-Control-Max-Age 3600;add_header Access-Control-Allow-Credentials true;#从请求头中获取，不写死的解决方法add_header Access-Control-Allow-Origin $http_origin;#预检请求--直接返回200if ($request_method = OPTIONS){return 200;}}
}

Spring的解决方案
在类上添加如下注解即可

//跨域请求
@CrossOrigin

Http--跨域请求相关推荐

springboot +element-axios跨域请求
1.初始化element项目 1.1:vue init webpage '项目名称' 1.2:npm i element-ui -S 1.3:在main.js添加 import ElementUI f ...
简单配置nginx反向代理，实现跨域请求
简单配置nginx去做反向代理,实现跨域请求简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档先介绍几个nginx命令打开n ...
js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
laravel php跨域请求,laravel开发中跨域的解决方案
前言众所周知我们大家在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 l ...
Nginx配置跨域请求 Access-Control-Allow-Origin *
Nginx配置跨域请求 Access-Control-Allow-Origin * 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is p ...
jfinal里使用ajax,Jfinal解决AJAX的跨域请求
JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful. 一开始使用AJAX来传输json数据时, ...
ajax 请求_前端后分离Ajax跨域请求保证Session一致
JAVA码牛牛,程序员学习指南前后端分离的项目,使用Ajax请求一般都出现跨域的问题. 跨域的时候所创建的session是不会被浏览器保存下来的.所以每次进行跨域请求时,服务器都认为不是同一个浏览器 ...
关于ajax跨域请求（cross Domain）
Cross Domain AJAX主要就是A.com网站的页面发出一个XMLHttpRequest,这个Request的url是B.com,这样的请求是被禁止的,浏览器处于安全考虑不允许进行跨域访问, ...
arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
ajax 跨域请求，每次会发送两个请求？
2019独角兽企业重金招聘Python工程师标准>>> 跨域已经是个老话题了,但是最近搞百度的语音接口的时候,在服务端配置了 CORS ,跨域倒是没问题,但是每次都会发送两个请求: ...

Http--跨域请求

Http--跨域请求相关推荐

最新文章

热门文章