52、Vue 怎么实现跨域(必会)

1、什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个 3 个中有一个不同就是跨域

2、使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题，打开 config/index.js,在 proxyTable 中添写如下代码：

proxyTable: {

'/api': { //使用"/api"来代替"http://f.apiplus.c"

target: 'http://f.apiplus.cn', //源地址

changeOrigin: true, //改变源

pathRewrite: {

'^/api': 'http://f.apiplus.cn' //路径重写

}

3、使用 CORS（跨域资源共享）

（3.1）前端设置，vue 设置 axios 允许跨域携带 cookie（默认是不带 cookie）

axios.defaults.withCredentials = true;

（3,2）后端设置：

（3.2.1）跨域请求后的响应头中需要设置

（3.2.2）Access-Control-Allow-Origin 为发起请求的主机地址

（3.2.3）Access-Control-Allow-Credentials，当它被设置为 true 时，允许跨域带 cookie，但此时 Access-Control- Allow-Origin 不能为通配符*

（3.2.4）Access-Control-Allow-Headers，设置跨域请求允许的请求头

（3.2.5）Access-Control-Allow-Methods，设置跨域请求允许的请求方式