跨域请求（个人笔记）

1、什么是跨域请求？

说明：使用ajax获取数据的时候，如果当前界面的地址和所需要请求的服务器的地址不一样，不一样的判断依据是：协议、域名、端口。任意一种不一样，就判定为跨域请求。

例如：当前端页面的请求地址是：http://127.0.0.1:5500/index.html
页面按钮的请求路径是：http://127.0.0.1:9999/index_data

2、跨域请求的表现

通过ajax请求，获取不到后台传给前端的数据。

3、获取不到数据的原因

原因：浏览器不将数据给ajax请求中的success成功函数中。

报错信息：

4、解决跨域的方法

在服务端处理跨域请求方案：

1、后端：在响应头中增加Access-Controller-Allow-Origin的信息（如图）
2、前端：jsonp

5、跨域请求和OPTION请求的关系

1、简单的跨域请求：get、post
2、复杂的跨域请求（结合OPTION请求一起结合使用）：put、delete、自定义的请求头

例：如果是复杂的跨域请求，不会以ajax真实的请求来进行请求，会以OPTIONS的请求方式请求。如图1，请求方式就是OPTIONS请求，因为自定义请求头了。此时需要在后端响应头再次增加一条相应信息，如图2。

图1、

图2、

再次请求，会发现有两个请求，一个是OPTIONS请求，一次是GET请求。

总结：

OPTIONS请求相当于一次询问请求，用OPTIONS的返回结果告诉浏览器，这个请求头允不允许发送。

一般在zuul网关中配置请求跨域的方式：

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.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ContextFilter implements Filter{
     
    private final int time = 20*24*60*60;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
     
        // TODO Auto-generated method stub

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
     
        HttpServletResponse resp = (HttpServletResponse) response;
        HttpServletRequest req= (HttpServletRequest) request;
        resp.setHeader("Access-Control-Allow-Origin", "*");
        resp.setHeader("Access-Control-Allow-Headers", "*");
        resp.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
        resp.setHeader("Access-Control-Max-Age", time+"");
        if ("OPTIONS".equalsIgnoreCase(req.getMethod())){
     
            resp.setStatus(HttpServletResponse.SC_OK);
        }else {
     
            chain.doFilter(request, resp);
        }
    }

    @Override
    public void destroy() {
     
        // TODO Auto-generated method stub
    }
}