同源策略与跨域及解决方案

同源策略
概念：

    同源策略是浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，不能读写对方资源，所谓同源是指"协议+域名+端口"三者相同。

跨域
概念：

    使用AJAX技术（XMLHttpRequest 对象），从一个网页去请求另一个网页资源时，违反浏览器同源策略限制，引起的安全问题，称为跨域。 

①域名：

主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js
子域名不同 http://www.666.baidu.com/inde... –>http://www.555.baidu.com/test.js
域名和IP地址 http://www.baidu.com/index.html –>http://180.149.132.47/test.js
②端口：

http://www.baidu.com:8080/ind...–> http://www.baidu.com:8081/tes...
③协议：

http://www.baidu.com:8080/ind...–> https://www.baidu.com:8080/te...
备注：

localhost和127.0.0.1虽然都指向本机，但也属于跨域
解决方案
①JSONP技术

利用HTML的

②跨域资源共享CORS

    CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource ）。
    它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用sharing的限制。

response.setHeader('Access-Control-Allow-Origin', '*')
③代理服务器技术

    vue3为例配置 vue.config.js