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

前端开发中，做接口联调时，少不了会遇到跨域访问的问题，此处记录一些遇到的问题和解决的办法。

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字段，简单请求的条件如下：

1. 请求方法是以下三种方法之一
   HEAD
   GET
   POST
2. 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 {

	@Override
	public 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);
	}

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		
	}

	@Override
	public 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/;
        }
        ...
    }

可能遇到的问题

1. 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的值。
2. 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的值需要设置为具体的域名。
3. 其他问题待后续补充