打破ajax 跨域问题，游刃有余的解决方案，大神就是这样操作的 _生活知道

什么是 ajax 跨域
主流的前后端分离模式下，当前端调用后台接口时，由于是在非同一个域下的请求，从而会引发浏览器的自我安全保护机制，最终结果是接口成功请求并响应，但前端不能正常处理该返回数据。
因此，当同时满足以下三个条件的情况下，就会出现跨域问题：
浏览器限制非同源请求（跨域）发送的是 XHR ( XMLHttpRequest ) 请求解决方案
想要彻底解决跨域问题，只需要破坏以上三个条件的任一即可：
1. 修改浏览器（不推荐）
添加浏览器启动参数：chrome –disable-web-security，但是极不推荐这种解决方式。
2. JSONP请求（不常用）
Jsonp，全称 JSON with Padding，一种非官方的协议，而是一种约定；前端通过向后台发送 script 类型请求解决跨域，此时接口响应的 application/javascript 类型的数据会作为 callback 函数的参数进行处理。
所以，后台也需要做相应的处理。以 Java 为例，添加如下配置即可：
@ControllerAdvicepublic class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { // 前后端约定的jsonp参数名，默认值是callback super(&
综上， jsonp 请求存在以下几个弊端：
服务端需要改动代码进行支持；只支持发送 Get 请求，请求头中更改其它类型的请求方式是无效的；发送的不是 XHR 请求，而是 script 类型，无法享受到相关的特性。
【打破ajax 跨域问题，游刃有余的解决方案，大神就是这样操作的】3. 调用方隐藏跨域
用 Nginx 或 Apache 来代理调用方的请求（客户端变更为相对路径请求，而非绝对路径），此时对于浏览器来说，由于请求是同源的，因此就不存在跨域问题。
4. 被调用方允许跨域（最常用）
服务端配置
以 Java 应用为例，添加如下全局配置：
@Configurationpublic class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(&Nginx 配置
如果配置了 nginx 作为代理服务器，那么只需要为 nginx 添加支持跨域请求即可：
server { listen 80; server_name xxx.com; location / { proxy_pass http://localhost:8080/;
Q1：浏览器在执行跨域请求时，是先执行后判断，还是先判断后执行？A1：都有可能，这需要根据所发送的请求是简单请求还是非简单请求来判断；如果是非简单请求，浏览器每次在执行真正的请求之前，还会先发送一个 options 请求方式的预检命令可以得到我整理的这些前端资料了
以上就是朝夕生活（www.30zx.com）关于“打破ajax 跨域问题，游刃有余的解决方案，大神就是这样操作的”的详细内容，希望对大家有所帮助！

打破ajax 跨域问题，游刃有余的解决方案，大神就是这样操作的

猜你喜欢