当前位置:朝夕网 » 数码科技 » 打破ajax 跨域问题,游刃有余的解决方案,大神就是这样操作的

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

什么是 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 类型,无法享受到相关的特性。

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 跨域问题,游刃有余的解决方案,大神就是这样操作的