解决方案:jsonp
访问接口是有可能需要跨域和传cookie,还要注意jquery版本
npm install jquery@3 --save
最好用,一般不出错的解决方法
$.ajax({
url: "调用的接口",
type: "get",
dataType: "jsonp", //指定服务器返回的数据类型
jsonpCallback: "showData", //指定回调函数名称
xhrFields: { withCredentials: true },//配置开启,跨域请求是否携带cookie
crossDomain: true,//跨域开启
async: true,//不同步请求
success: function (data) {
_this.setName(data.UserName, data.IsAdvIP);
},
});
npm install jsonp
//jsonp方法
jsonp('接口地址', { params参数})
.then((res) => {
console.log(res);
resolve();
})
.catch((err) => {
// console.log(err)
});
解决方案:vue配置代理
经常不管用,可能是少了什么配置导致的把
module.exports = {
...
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true,
},
hot: true,
hotOnly: true,
disableHostCheck: true,
historyApiFallback: true,
proxy: {
"/aseanapi": {
target: "", // 目标请求的地址端口号是5000
pathRewrite: { "^/aseanapi": "" }, //重写路径 匹配以/api1为开头的路径都变为空字符串 (确保url路径是正确的)
changeOrigin: true, //用于控制请求头中的host值
cookieDomainRewrite: {
"*": "localhost",
},
},
[process.env.VUE_APP_BASE_API]: {
target: '',
changeOrigin: true,//开启跨域
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",
},
},
"user-api": {
target: "",
changeOrigin: true,
pathRewrite: {
"^user-api": "",
},
cookieDomainRewrite: {
"*": "localhost",
},
},
},
},
}