ajax跨域问题（前后端分离项目）

Ajax跨域

域：协议+IP+端口

http://localhost:8989

http://localhost:8080

http://www.baidu.com:80

1.安全问题

摘自互联网：

为什么AJAX访问不能跨域呢？要讲清楚这个问题，首先要谈谈Cookie

1.客户向A网站的服务器发送登录请求，并携带账号密码数据

2.A网站的服务器校验账号密码正确后，返回响应并给本地添加了Cookie

3.之后客户再次向A网站发起请求会自动带上A网站存储在本地的cookie

4.A网站的服务器从cookie中获取账号密码数据后，返回登陆成功界面。

下图为cookie的工作机制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iT5utNIl-1570535898531)(mdpic/o_Cookie_Session001.png)]

假设有一个黑客叫做小黑，他从网上抓取了一堆美女图做了一个网站，每日访问量爆表。

为了维护网站运行，小黑挂了一张收款码，觉得网站不错的可以适当资助一点，可是无奈伸手党太多，小黑的网站入不敷出。

于是他非常生气的在网页中写了一段js代码，使用ajax向淘宝发起登陆请求，因为很多数人都访问过淘宝，所以电脑中存有淘宝的cookie，不需要输入账号密码直接就自动登录了，然后小黑在ajax回调函数中解析了淘宝返回的数据，得到了很多人的隐私信息，转手一卖，小黑的网站终于盈利了。

如果跨域也可以发送AJAX请求的话，小黑就真的获取到了用户的隐私并成功获利了！！！
为了防止小黑这种黑客侵犯用户的隐私，同源政策出现了。

同源政策：不是同协议 同域名 同端口 的网页无法相互访问。

用form表单提交到不同源的网页是被允许的，因为 form 提交到另一个域名之后，原页面的脚本无法获取新页面中的内容,所以浏览器认为这是安全的。

而 AJAX 是可以读取响应内容的，因此浏览器不能允许你这样做。如果你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。

所以浏览器这个策略的本质是，一个域名的 JS ，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。

2.解决方案

响应头中添加：Access-Control-Allow-Origin: http://localhost:8080 即可

（请求方可以请求到，A请求B，B返回的响应被浏览器拦截下来了，所以需要B告诉浏览器，信任A，也就是B在响应头中添加信任的A的域，浏览器读取到响应头中的内容，把B的响应给了A）

被访问方，添加此响应头；响应头中设置访问方的域

或在被访问方的Controller类或方法上，添加注解：

@CrossOrigin("http://localhost:8080")
public class SysUserController {
	....
}

3. 跨域携带cookie

A 不仅要能访问 B，还能在请求中携带B的cookie，进而保证B中运行时有cookie可用

被访问方：B

指定好允许的域

@CrossOrigin(value = "http://localhost:8080")
public class SysUserController {
	....
}

访问方：A

withCredentials: true 【发送方也想携带】

$.ajaxSetup({
 xhrFields: {
     withCredentials: true
 }
});
$.getJSON("http://localhost:8989/web/sys/user/info...);
$.get(...)
$.post(...)

或

$.ajax({
 type: "POST",
 url: "http://localhost:8989/web/sys/login",
 ...,
 xhrFields: {
     withCredentials: true
 }
});

或

$.ajax({
 type: "POST",
 url: "http://localhost:8989/web/sys/login",
 ...,
 var xhr = new XMLHttpRequest();
// 跨域携带cookie
xhr.withCredentials=true;