欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

跨域请求

程序员文章站 2022-07-10 10:19:34
...

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
    }
}
相关标签: 跨域请求