Vue 配置本地代理解决跨域问题
.一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。二、什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。当出现跨域问题时浏览器会报如下错误:三.如何解决跨域问题在vue中使用proxy进行跨域
·
.一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
二、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
当出现跨域问题时浏览器会报如下错误:
三.如何解决跨域问题
在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器。
一.vue 配置本地代理解决跨域步骤:
1.在vue项目根目录下找到vue.config.js文件(如果没有该文件则自己创建),在proxy中设置跨域
module.exports={
publicPath:'./',
outputDir: (process.env.NODE_ENV === "production") ? 'smart' : 'test', // 不同的环境打不同包名
devServer:{
// hot:true,//是否自动保存
open : true,//是否自动启动
port : 8080,//默认端口号
// host : "0.0.0.0",
https: false, //是否为https 请求 https:{type:Boolean}
proxy:{
'/api':{
//target: process.env.VUE_APP_URL, //可以根据不同环境有不同的接口域名
target:'http://58.250.250.106/',// 固定的域名
changOrigin:true, //允许跨域
pathRewrite:{
"^/api":"" /* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是:http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
}
}
}
}
}
2.在main.js 中引入axios 并将请求根路径 baseURL设置为/api ,这时候我们的跨域就已经完成了。
import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL="/api";
//全局挂载axios
Vue.prototype.$axios = axios;
//注:下面是个人学习记录用
//条件多的时候也可以进行判断
//axios.defaults.baseURL= process.env.NODE_ENV === 'production' ?'http://58.250.250.106/':"/api";
// 让ajax携带cookie
//axios.defaults.withCredentials = true
//通过axios拦截器 添加token验证
//axios.interceptors.request.use(config=>{
//config.headers.Authorization =window.sessionStorage.getItem('token')
//在最后必须return config
//return config
//})
3.在页面中使用axios 发送请求。
//请求时baseURL 请求头可以省略不写
this.$axios.post("/rest/index/login/login", {
login_info:
"eyJ1c2VybmFtZSI6IldYQkQwMSIsInBhc3N3b3JkIjoiOGRkY2ZmM2E4MGY0MTg5Y2ExYzlkNGQ5MDJjM2M5MDkifQ==",
sso: 1,
pe_signals: "32a14c293576410dab5eb7610aefd856",
})
.then((res) => {
console.log(res);
});
这样就可以拿到数据了:
更多推荐
已为社区贡献11条内容
所有评论(0)