vue使用history模式,配合axios在正式环境跨域配置
本地,正式环境使用nginx配置跨域请求
·
正式环境vue+axios+nginx跨域配置
vue.config.js配置
本地开发配置调试跨域
devServer: {
open: false,
hot: true,
proxy: {
//axios中baseUrl为/baiduApi的请求
'/baiduApi': {
target: 'https://aip.baidubce.com', //访问地址
changeOrigin: true,
secure: false, //只有代理https 地址需要次选项
pathRewrite: {
'^/baiduApi': '' //重写地址
}
}
},
},
axios请求
axios({
//这里的baseURL会自动替换成vue.config.js中配置的地址即最终访问地址是https://aip.baidubce.com
baseURL: '/baiduApi',
url: `/oauth/2.0/token?grant_type=${grantType}&client_id=${clientId}&client_secret=${clientSecret}×tamp=${new Date().getTime()}`,
method: 'get',
headers: {
dataType: 'json',
'Content-Type': 'application/x-www-form-urlencoded'
}})
//最终完整的访问地址
let baseUrl = https://aip.baidubce.com/oauth/2.0/token?grant_type=${grantType}&client_id=${clientId}&client_secret=${clientSecret}×tamp=${new Date().getTime()}
服务器Nginx配置
// 将baiduApi 替换成自己定义的名称即可,此段代码需要放在你的访问地址server_name相同的地方
location /baiduApi {
rewrite ^/baiduApi/(.*)$ /$1 break;
proxy_pass https://aip.baidubce.com;
add_header 'Access-Control-Allow-Origin' '*';
}
参考文章:
nginx 反向代理处理跨域问题
vue解决跨域方法
更多推荐
已为社区贡献2条内容
所有评论(0)