CORS跨域

CORS（Cross-origin resource sharing），“跨域资源共享”，是一个W3C标准。它允许浏览器向跨源的服务器发送请求。CORS需要浏览器和服务器同时支持。

跨域访问的产生

当网页当前的协议，域名和端口与请求的接口或其他页面的协议、域名和端口都一致时，则它们是同源的，否则就是跨域。

	源	目的	是否跨域
协议	http[https]	https[http]	是
域名	localhost	localhost2	是
端口	8000	8001	是(协议和域名一致时，IE浏览器为同源）

例如，现有一个前端服务http://localhost:8000, 需要调用接口http://localhost:8001 的服务，这个时候就需要跨域的支持。此时，浏览器就会告诉我们接口调用出错了:Access to fetch at 'http://localhost:8001/api/login' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

为什么要限制跨域访问

会造成CRSF和XSS攻击。可参考https://www.cnblogs.com/lailailai/p/4528092.html。

跨域访问的通信过程

CORS的通信过程，是由浏览器自动完成的，不需要不需要用户参与：浏览器一旦发现请求跨源，就会自动添加一些附加的头信息或者多出一次附加的请求。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段，简单请求的条件如下：

请求方法是以下三种方法之一
HEAD
GET
POST
HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight），请求方法为OPTIONS。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有当前网页的域名端口等在许可范围内，浏览器才不会拒绝数据展示。

实现

JSONP

页面中的一些标签是不做同源限制的，比如<img> <script> <style>等标签，JSONP正是利用<script>标签，把不同源的请求伪装成一个脚本请求，服务器端返回数据后，再通过回调处理。这种方式仅支持GET请求。不推荐这种方式。

响应头部修改

前端实现

请求不需要cookie时，不需要做任何改变，添加cookie时，需要配置credentials: 'include'或withCredentials:true。

服务端java实现

使用filter来实现，下面是一个简单的实现：
（配置项参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers）

import java.io.IOException;import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;public class CrossDomainFilter implements Filter {@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {HttpServletResponse httpServletResponse = (HttpServletResponse) response;httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");httpServletResponse.setCharacterEncoding("utf-8");chain.doFilter(request, httpServletResponse);}@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void destroy() {}
}

当请求中带有第三方cookie的时候，上述代码会出现新的问题： Access to fetch at 'http://localhost:8001/api/login' from origin 'http://localhost:8000' 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'.

此时可以将Access-Control-Allow-Origin修改为具体的域名即可解决。但是我们在开发中，可能发出请求的域名是多个，为方便开发，可以先获取请求的域名，再将Access-Control-Allow-Origin的值设置为获取的域名即可（仅限开发使用哦）。

服务端koa2-cors实现

使用nodejs做server时，可以使用koa2-cors来允许跨域访问：

 cors({origin: function (ctx) {return ctx.request.header.origin; //设置为请求的域名},credentials: true,allowMethods: ['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH'],allowHeaders: ['Content-Type', 'Authorization', 'x-requested-with'],exposeHeaders: ['Content-Length', 'Date', 'X-Request-Id'],maxAge: 1800})

代理

正向代理

开发服务端，页面请求同源的服务端，由服务端再请求数据返回给前端。如前端请求为http://localhost:8000,需要请求跨域的http://localhost:8001/api/login的数据：可先请求http://localhost:8000/api/login接口，由http://localhost:8000/api/login接口向http://localhost:8001/api/login请求数据并返回给页面。

反向代理

使用nginx代理，将http://localhost:8000和http://localhost:8001/api/***都使用nginx代理,如：

 ...server {listen       80;server_name  127.0.0.1;location / {proxy_pass http://localhost:8000/;}location ^~ /api/ {proxy_pass http://localhost:8001/;}...}

可能遇到的问题

Access to fetch at 'http://localhost:8001/api/login' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 设置Access-Control-Allow-Origin的值。
Failed to load http://localhost:8001/apiout/sentimentAanalysis/sentiment_analysis: 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'. Origin 'http://localhost:8000' is therefore not allowed access. Access-Control-Allow-Origin的值需要设置为具体的域名。
其他问题待后续补充

web开发过程中跨域访问的问题相关推荐

ajax 没有权限 -quot;跨域quot;,如何解决AJAX中跨域访问出现'没有权限'的错误
如何解决AJAX中跨域访问出现'没有权限'的错误很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误,这是XMLHTTP组件的限制-安全起见禁止访问非同域的网 ...
python web开发中跨域问题的解决思路
python web开发中跨域问题的解决思路参考文章: (1)python web开发中跨域问题的解决思路 (2)https://www.cnblogs.com/mqhpy/p/11445071.h ...
Web应用跨域访问解决方案
Web应用跨域访问解决方案 Web应用的跨域访问解决方案 Web跨域访问解决方案做过跨越多个网站的Ajax开发的朋友都知道,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与 ...
Web应用跨域访问及单点登录解决方案汇总
做过跨越多个网站的Ajax开发的朋友都知道,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.Ajax的跨域访问问题是现有的Aj ...
Web API 跨域访问
JS调用接口最需要注意的就是跨域问题在.net平台下使js跨域变得非常简单 1.在nuget中引用 Microsoft ASP.NET Web API 2.2 Cross-Origin Suppor ...
多域间访问：创建子域及树域并搭建信任关系并实现林中跨域访问
前言:如果一个企业网络的规模不是很大,一般使用单域结构即可满足需求,而且便于管理.但是当企业的规模越来越大,单域结构不能满足用户需求时,可能需要增加其他的域,就会构成域树或者域林林,域树和子域的概念 ...
解决ASP.NET AJAX在frame及iframe中跨域访问的问题
参考网址: http://support.microsoft.com/kb/936993/zh-cn http://weblogs.asp.net/bleroy/archive/2007/01/31/ ...
ASP.NET Web API 跨域访问（CORS）要注意的地方
一.客户端用JSONP请求数据如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...
ssm项目解决AJAX跨域,ssm项目跨域访问
最近使用ssm开发了一个项目,为了项目的开发速度,采用的是前后端同时开发,所以前端文件没有集成在项目中,最后在调试时涉及到了跨域.跨域的解决方法很多,我采用的是最简单的一种,代码如下: 新建一个过滤器 ...

web开发过程中跨域访问的问题

web开发跨域访问的问题