目录
2.3.4效果 可以看到 请求url地址是localhost:8081
1.概述
1.跨域是浏览器为了安全而做出的限制策略
2.浏览器请求必须遵循同源策略:同域名、同端口、同协议
2.解决方案
2.1 CORS跨域
2.1.1 概述
CORS跨域 - 服务端设置,前端直接调用,后台允许某个站点进行访问
2.1.2安装axios插件
npm i axios --save -dev
import axios from 'axios';
mounted(){
let url = "https://www.easy-mock.com/mock/5fa7eef4234c9b0d8babe68d/example/mallData";
axios.get(url).then(()=>{
})
}
2.1.3请求头的内容
Access-Control-Allow-Credentials:true 允许前端携带信用凭证,cookie
Access-Control-Allow-Origin: http://localhost:8080 阔以在后台指定前端以 localhost:8080的地址去访问
2.2 JSONP跨域
2.2.1 概述
前端适配,后台配合,前后台同时改造
2.2.2 前端安装JSONP插件
npm i jsonp --save-dev
import jsonp from 'jsonp';
mounted(){
let jsonpUrl = "https://barrage-kunpeng.csdn.net/api/barrage/list";
jsonp(jsonpUrl,()=>{
})
}
可以看到他是在js中的
2.3 代理跨域
2.3.1概述
接口代理-通过修改nginx服务器配置来实现,前端修改后台不动
2.3.2 创建vue.config.js
2.3.3vue.config.js
module.exports = {
devServer:{
host:"localhost",
port:8081,
proxy:{
'/mock':{
target:"https://www.easy-mock.com",
changeOrigin:false
}
}
}
}
2.3.4效果 可以看到 请求url地址是localhost:8081
2.3.5配置扩展
代理把api置换为空
mounted(){
let url = "/api/mock/5fa7eef4234c9b0d8babe68d/example/mallData";
jsonp(url,()=>{
})
}
module.exports = {
devServer:{
host:"localhost",
port:8081,
proxy:{
'/api':{
target:"https://www.easy-mock.com",
changeOrigin:false,
pathRewrite:{
"api":""
}
}
}
}
}