前端角度解决跨域的三种方法（CORS、JSONP、接口代理）

跨域的概念：
同源策略是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器 都会使用这个策略。

所谓同源指的是：
协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议、域名、端口号都相同，同源。

②、https://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议不同，非同源。

③、http://www.123.com:8080/index.html 调用 http://www.123.com:8081/welcome.jsp 端口不同，非同源。

④、http://www.123.com/index.html 调用 http://www.456.com/welcome.jsp 域名不同，非同源。

⑤、http://localhost:8080/index.html 调用 http://127.0.0.1:8080/welcom.jsp 虽然localhost等同于 127.0.0.1 但是也是非同源的。

同源策略限制的情况：

1、Cookie、LocalStorage 和 IndexDB 无法读取
2、DOM 和 Js对象无法获得
3、AJAX 请求不能发送

注意：对于像 img、iframe、script、css 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。

下面来介绍三种主流跨域方式：

CORS跨域 ：”跨域资源共享”（Cross-origin resource sharing）

前端需要做一个简单的设置其余的交给后端。
说明：后端允许前端某个站点进行访问。需要安装axios且axios需要then来调用
回应的报文中会有这个

允许传cookie 允许跨域

//需要在AJAX请求中打开withCredentials属性。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
其余相同（如果不打开会导致cookie传不过去）

JSONP跨域 ：(JSON with Padding)

前端适配后台配合 不用axios了用jsonp。
说明：前后台同时改造，不是xhr请求，而是一个js。通过操作函数来传递参数。
1.安装JSONP插件

2.使用JSONP（注意如果需要使用第三个参数（err，res）第一个是错误信息，第二个才是请求的数据）

代理跨域 ：(开发环境)

通过修改nginx服务器配置来实现（欺骗浏览器）
说明：前端修改后端不动
访问的地址不需要再加头了

前端配置代码如下：

module.exports = {
  // 默认加载
  devServer: {
    host: 'localhost',
    // 项目端口
    port: 8080,
    // 代理访问a代理成b再由b访问a
    proxy: {
      '/api': {
        // 代理网址
        target: 'http://mall-pre.springboot.cn',
        // 是否将主机头原点更改为url地址
        changeOrigin: true,
        // 转发地址
        //如果有很多种接口 这一种就可以解决了而不是写很多拦截搞了一个虚拟地址api
        // 之后再把api设置成空只转发后面的部分
        pathRewrite: {
          '/api': ''
        }
      }
    }
  },

请求结果：

把咱们的头替换成目标头 api替换成空 再拼接上后面的进行访问