使用proxy解决跨域问题
问题引入
前端如果不通过proxy设置代理,则请求接口会报跨域问题
Access to XMLHttpRequest at 'https://www.baidu.com/s?ie=utf+-+8&mod=1&isbd=1&isid=28B087E526051712&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=this.$axios&fenlei=256&oq=this.%2524axios&rsv_pq=af3009be00003a79&rsv_t=1c5fWtMk%2B6xwWKQqibPt6DyyGzLEaQSdASvH93Q6UDEXyZdfGTnRxojuNms&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=t&bs=this.$axios&_ss=1&clist=&hsug=&f4s=1&csor=' from origin 'http://172.16.20.231:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决方案
1.在vue.config.ts中进行配置
//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
proxy: {
'/cdn': {
target: 'https://position.csdnimg.cn', // 后台接口域名
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
'^/cdn': '/'
}
}
}
}
2.在具体页面发送请求
假设要请求的后端地址为’https://position.csdnimg.cn/oapi/get’
//使用axios进行请求,首先在main.ts中将axios挂载到vue原型中
import axios from 'axios'
Vue.prototype.$service = axios
//在具体页面中使用this.$axios进行请求,原生未进行封装
this.$axios({
method: "get",
//上面的proxy会将url地址解析为https://position.csdnimg.cn/oapi/get
url: "/cdn/oapi/get",
params: {
// 这里是发送给后台的数据
},
}).then((response) => {
// 这里使用了ES6的语法
console.log(response); // 请求成功返回的数据
});
3.某些条件下可能需要对地址进行替换
var url = "https://position.csdnimg.cn/oapi/get"
var reg = /^http(s)?:\/\/(.*?)\//
// 必须是http开头或者https开头,结尾为'/'
// 把host替换成指定数值
var ToReplace = 'cdn/'
url.replace(reg, ToReplace)
// Host/cench
//*******************************************
如果只需要取出例如:position.csdnimg.cn,则通过以下方式
reg.exec(url)[2]
// www.cnblogs.com