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,设置跨域请求允许的请求方式