前端跨域解决方案

什么是跨域？

• 跨域指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的。
• 同源策略：指协议、域名、端口号都要相同，其中有一个不同都会产生跨域。

解决跨域：

1. JSONP跨域
   JSONP的原理就是利用 script 标签不受同源策略限制，通过src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback中，返回给浏览器，浏览器解析执行，从而前端拿到callback返回的数据。
   缺点：只能发送GET一种请求。
2. 跨域资源共享(CORS)
   CORS是一个W3C标准，允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。
   在后端设置请求头

	res.setHeader('Access-Control-Allow-Origin','*');

3. 代理
   在vue项目根目录下vue.config.js文件中，在proxy中设置跨域
   前端代理核心实现通过 http-proxy-middleware 插件来实现的，vue2.x 和vue3.x 脚手架代理跨域实现原理是一样的。

module.exports = {
  publicPath: './',
  devServer: {
    open: true,
    proxy: {
      '/api': {
        target: '', // 线上后端地址
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}