跨域

1、为什么出现跨域

一般浏览器会有同源策略的限制。同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受影响。所谓同源（同一个域）就是指两个页面具有相同的协议（protocol）、主机（host）和端口号（port）

2、什么是跨域

当一个请求的url的协议、域名、端口号三者之间任意一个与页面当前的url不同即为跨域。

当前页面url	被请求的url	是否跨域	原因
http://www.test.com	http://www.test.com/index.html
http://www.test.com	https://www.test.com/index.html
http://www.test.com	http://www.baidu.com
http://www.test.com:8080/	http://www.test.com:8081/

PS:一般跨域会出现如下报错：

3、vue项目中如何解决跨域

1、在项目的vue.config.js文件里面添加以下代码，如果没有vue.config.js文件则自己手动添加。

module.exports = {

  devServer: {

    proxy: {

      '/api': {

        // 这里是后台提供给我们的接口地址

        target: 'http://localhost:5000/',

        changeOrigin: true,  //允许跨域

        open:true,

        pathRewrite:{

          /* 当我们在浏览器看到的请求地址为：http://localhost:8080/api/User/GetAllUsers */

          /* 实际上我们访问的地址为：http://localhost:5000/User/GetAllUsers  因为重写了/api */

          /* 如果后台提供的接口本身就带有api，则无需执行重写路径这个步骤 例如:http://localhost:5000/api/User/GetAllUsers */

          '^/api':''  //重写路径

        }

      }

    }

  }

}

上面的代码采用的是proxy反向代理进行跨域的请求，原理是：将域名发送给本地服务器（启动的vue项目的服务器：例如 localhost:8080）,再由本地服务器去请求真正的服务器。

2、在页面使用axios进行数据的请求