Javascript的同源策略

所谓同源就是‘协议’，‘端口’，‘域名’相同，同源策略是客户端脚本的一种安全度量标准，防止某个文档或脚本从多个不同源装载（ 一段脚本只能 读取来自同一来源的窗口和文档的属性 ）

什么是跨域

跨域是由于浏览器的同源策略造成的，浏览器不可以执行其他网站的脚本，同时也是浏览器自身的一种保护机制（限制javascript）防止他人恶意攻击网站，例如真实的登录页如果被人用ifrome恶意嵌入到自己的网站就会造成信息泄露

如何解决跨域

1、jsonp

原理：因为所有的src属性和href属性都不受同源策略限制，可以请求第三方服务数据（只支持get请求）
步骤：
（1）创建一个script标签 var script = document.createElement(‘script’);
（2）src属性设置设置接口地址，并包含一个callback回调函数 script.src=”HTTP://127.0.0.1:8080/public.jsp”?callback=”jsonpCallback”
(3)插入到页面 document,head.appendChild(script)
(4)通过定义的回调函数接受后台返回数据 function jsonpCallback(data){
注意：jsonp返回的数据是json对象可以直接使用
Ajax取得的数据是json字符串需要转换成json对象才能使用
}

2、CORS：跨域资源共享

原理：服务端设置 Access-Control-Allow-OriginHTTP 响应头之后，浏览器将会允许跨域请求
Access-Control-Allow-Origin: * //允许所有域名访问，或者 Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问

3、设置反向代理

原理：做一个代理服务器，跟浏览器同协议，同域名，同端口，从而让浏览器将请求发过来，代理服务器接收，而服务器和服务器之间没有同源策略，所以我们将代理服务器接收到浏览器的请求后，再发送给真正的服务器，真正的服务器接收到请求后，将数据响应给我们的代理服务器，代理服务器接收到之后再响应给浏览器
在vue.config.js配置文件中 devServer.proxy节点中配置

4、配置谷歌浏览器

老版本浏览器

右键谷歌浏览器快捷方式选择属性 —> 快捷方式 —> 目标 ：加上 —disable-web-security

新版本浏览器

在电脑上新建一个目录，例如：C:\MyChromeEnvUserData
在属性页面中的目标输入框里加上： —disable-web-security —user-data-dir=C:\MyChromeEnvUserData