原生html axios解决跨域的方法原生ajax解决跨域

转载

mob6454cc667b1d 2023-12-06 21:36:55

文章标签 原生html axios解决跨域的方法跨域 nginx json 文章分类 iOS 移动开发

本文为学习慕课网晓风轻老师的教程后自行编辑，仅作为本人日后复习翻阅。

1.为什么会发生AJAX跨域？
浏览器限制 (跨域问题是浏览器在前台做的校验，和后台没有关系)
跨域 (请求客户端为localhost：8080，服务端为：localhost:8081)
XHR(XMLHttpRequest)请求

2.解决思路：
浏览器 — 指定参数让浏览器不做校验可解决，但是需要每个请求的人都改动，并且发生在客户端，所以通过这个思路解决跨域问题的意义不大！

XHR(XMLHttpRequest) — JSONP方式解决，即将请求用JSONP(动态创建script)包装，使之不是XHR请求即可，但是 JSONP解决方案有很多弊端，无法满足现在的很多开发要求，所以JSONP使用越来越少！
用例：
前台：增加一个dataType："jsonp"
$.ajax({ url: "http://localhost:8080/test/get1", dataType: "jsonp", success: function (json) { console.log(json) } });

后台：新增一个切面

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {

    public JsonpAdvice() {
        super("callback");
    }
}

控制台截图：

原生html axios解决跨域的方法原生ajax解决跨域_跨域

注意：

1、jsonp请求时的type为script

2、

原生html axios解决跨域的方法原生ajax解决跨域_跨域_02

中的&_=1519。。。为防止请求被缓存，如果请求可以被缓存，可在前台请求是加入cache: true表示结果可以被缓存。

jsonp的弊端：
1.服务器需要改动代码支持；
2.只支持GET；
3.发送的不是XHR请求；(所以无法支持异步、事件等新特性)

跨域 — 被调用方：支持跨域；调用方：隐藏跨域。

被调用方解决：支持跨域

1.服务器实现 — Filter解决方案

浏览器是先执行还是先判断？—先执行后判断(并不是所有请求都是这样)

新增一个Filter：

原生html axios解决跨域的方法原生ajax解决跨域_json_03

编写Filter中的代码：(注意 res.addHeader(“Access-Control-Allow-Origin”, “*”); 并不是适用所有场景)

原生html axios解决跨域的方法原生ajax解决跨域_json_04

简单请求和非简单请求

原生html axios解决跨域的方法原生ajax解决跨域_跨域_05

简单请求：先执行后判断

非简单请求：先发送一个OPTIONS预检命令，检查通过后再把跨域请求发送出去,代码改造即在Filter中加入：res.addHeader("Access-Control-Allow-Headers", "Content-Type");

错误：response to preflight request doesn’t pass acess control check:It does not have HTTP ok status
解决方案：

if(request.getMethod().equals(RequestMethod.OPTIONS.name())) {
            response.setStatus(HttpStatus.OK.value());
            return;
        }

OPTIONS预检命令缓存：在Filter中加入res.addHeader("Access-Control-Max-Age", "3600");值为数字，单位秒；

带Cookie的跨域：在被调用方加cookie，因为网络请求中只能读取本域的cookie。

"Access-Control-Allow-Origin", "*"  不能满足带cookie的请求

带cookie的请求需要Origin进行全匹配，不能使用"*"，另外需要在Filter中加入res.addHeader("Access-Control-Allow-Credentials", "true"); 为满足所有请求的Origin都通用，可以在Filter中做如下代码修改：

HttpServletRequest req = (HttpServletRequest)servletRequest;
 String origin = req.getHeader("Origin");
 if(!StringUtils.isEmpty(origin)){
     res.addHeader("Access-Control-Allow-Origin", origin);
 }

**带自定义头的跨域：**同理带cookie的跨域；

2.Nginx 配置

在ngnix.conf里面最后加上：

原生html axios解决跨域的方法原生ajax解决跨域_原生html axios解决跨域的方法_06