AJAX跨域问题讲解

作者 : 开心源码 本文共3216个字,预计阅读时间需要9分钟 发布时间: 2022-05-13 共137人阅读

为什么会发生产生跨域问题?

[ 产生跨域的起因 ]

1.浏览器限制
2.跨域(协议,域名,端口任何一个不同)
3.XHR(XMLHttpRequest)请求

也就是说当我们发送的是XMLHttpRequest请求不同的域名浏览器就会限制访问,那么就会产生跨域问题。

[ 处理跨域问题的思路 ]

1.改动用户端浏览器参数来解除限制 浏览器启动加入 --disable-web-security
2.Jsonp处理是XHR请求的问题.
3.跨域: 被调用方支持跨域,调用方的隐藏请求

跨域问题处理办法

1. JSONP处理跨域

[原理]:<script>请求不受同源政策限制 :JSONP动态创立<script>标签,通过<script>函数调用发出请求,返回值是也是js,函数名callback参数的值,函数参数是返回的json对象()
[弊端]:1.只支持Get请求2.发送到不是XHR请求

[jsonp请求实现]
$.ajax({    url: 'url",    dataType: "jsonp",    jsonp: "callback",    cache: true,    success: function(json) {        result = json;    }});
[jsonp请求实现原理]
//动态创立script标签function addScriptTag(src) {  var script = document.createElement('script');  script.setAttribute("type","text/javascript");  script.src = src;  document.body.appendChild(script);}window.onload = function () {  addScriptTag('http://example.com/ip?callback=foo');}// 回调函数-获取数据function foo(data) {  console.log('Your public IP address is: ' + data.ip);};

2. 跨域处理方案CORS

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要客户参加。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动增加少量附加的头信息,有时还会多出一次附加的请求,但客户不会有感觉。因而,实现CORS通信的关键是服务器。只需服务器实现了CORS接口,即可以跨源通信。

[简单请求-post请求]

处理:被调用放服务端设置Access-Control-Allow-Origin

被调用放服务端设置Access-Control-Allow-Methods

res.addHeader("Access-Control-Allow-Origin", "*") //允许所有域名可以跨域调用res.addHeader("Access-Control-Allow-Methods", "*") //允许所有请求方式跨域调用
[非简单请求-带cookie的请求]
$.ajax({    type: "get",    url: "url",    xhrFields: {        withCredentials: true    },    success: function(json) {        result = json;    }});

处理:带cookie时origin必需全匹配, 不能使用 *

被调用放服务端添加设置Access-Control-Allow-Credentials

res.addHeader("Access-Control-Allow-Origin", "localhost:8081")res.addHeader("Access-Control-Allow-Methods", "*")res.addHeader("Access-Control-Allow-Credentials", "true") //enable cookie
[非简单请求-带header的请求]
$.ajax({    type: "get",    url: 'url",    headers: {        "x-header1": "AAA"    },    beforeSend: function(xhr) {        xhr.setRequestHeader("x-header2", "BBB")    },    success: function(json) {        result = json;    }});

处理:带cookie时origin必需全匹配, 不能使用 *

被调用放服务端添加设置Access-Control-Allow-Header

res.addHeader("Access-Control-Allow-Origin", "*")res.addHeader("Access-Control-Allow-Methods", "*")res.addHeader("Access-Control-Allow-Header", "content-Type,x-header1,x-header2")

综上所述:

//带cookie的时候,origin必需是全匹配,不能使用*String origin = req.getHeader("Origin");if (!org.springframework.util.StringUtils.isEmpty(origin)) {    res.addHeader("Access-Control-Allow-Origin", origin);}res.addHeader("Access-Control-Allow-Methods", "*");// 支持所有自己设置头和预检命令(非简单请求会有预检命令)String headers = req.getHeader("Access-Control-Request-Headers");if (!org.springframework.util.StringUtils.isEmpty(headers)) {    res.addHeader("Access-Control-Allow-Headers", headers);         }res.addHeader("Access-Control-Max-Age", "3600");// enable cookieres.addHeader("Access-Control-Allow-Credentials", "true");

3. Nginx代理商

假如我们请求的时候还是用前台的域名,Nginx帮我们把这个请求转发到真正的后台域名上

[Nginx配置]
server{    # 监听9000端口    listen 9000;    # 域名是localhost    server_name localhost;    #但凡localhost:9000/api这个样子的,都转发到真正的服务端地址http://localhost:9001    location ^~ /api {        proxy_pass http://localhost:9001;    }    }

简单请求&非简单请求

只需同时满足以下两大条件,就属于简单请求,其他属于非简单请求

(1) 请求方法是以下三种方法之一:HEAD、GET、POST

(2)HTTP的头信息不超出以下几种字段(无自己设置头):

  Accept  Accept-Language  Content-Language  Last-Event-ID

(3)Content-Type:只限于三个值

  application/x-www-form-urlencoded  multipart/form-data  text/plain

码字不易,假如觉得对您有帮助,给个赞给一个小小的鼓励吧 (.)!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » AJAX跨域问题讲解

发表回复