（6）同源策略与跨域解决浏览器有一个重要的安全策略，称之为「同源策略」其中，$源=协议+主机+端口$，两个源相同，称之

浏览器有一个重要的安全策略，称之为「同源策略」

其中， $源=协议+主机+端口$ ，两个源相同，称之为同源，两个源不同，称之为跨源或跨域

比如：

源 1	源 2	是否同源
www.baidu.com	www.baidu.com/news	✅
www.baidu.com	www.baidu.com	❌
http://localhost:5000	http://localhost:7000	❌
http://localhost:5000	http://127.0.0.1:5000	❌
www.baidu.com	baidu.com	❌

同源策略是指，若页面的源和页面运行过程中加载的源不一致时，出于安全考虑，浏览器会对跨域的资源访问进行一些限制

同源策略对 ajax 的跨域限制的最为凶狠，默认情况下，它不允许 ajax 访问跨域资源

所以，我们通常所说的跨域问题，就是同源策略对 ajax 产生的影响

有多种方式解决跨域问题，常见的有：

代理，常用
CORS，常用
JSONP

无论使用哪一种方式，都是要让浏览器知道，我这次跨域请求的是自己人，就不要拦截了。

代理

对于前端开发而言，大部分的跨域问题，都是通过代理解决的

代理适用的场景是：生产环境不发生跨域，但开发环境发生跨域

因此，只需要在开发环境使用代理解决跨域即可，这种代理又称之为开发代理

在实际开发中，只需要对开发服务器稍加配置即可完成

// vue 的开发服务器代理配置
// vue.config.js
module.exports = {
  devServer: { // 配置开发服务器
    proxy: { // 配置代理
      "/api": { // 若请求路径以 /api 开头
        target: "http://dev.taobao.com", // 将其转发到 http://dev.taobao.com
      },
    },
  },
};

JSONP

在CORS出现之前，人们想了一种奇妙的办法来实现跨域，这就是JSONP。

要实现JSONP，需要浏览器和服务器来一个天衣无缝的绝妙配合。

JSONP的做法是：当需要跨域请求时，不使用AJAX，转而生成一个script元素去请求服务器，由于浏览器并不阻止script元素的请求，这样请求可以到达服务器。服务器拿到请求后，响应一段JS代码，这段代码实际上是一个函数调用，调用的是客户端预先生成好的函数，并把浏览器需要的数据作为参数传递到函数中，从而间接的把数据传递给客户端

JSONP有着明显的缺点，即其只能支持GET请求