解决方案: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",
        },
      },
    },
  },

}

解决方案:nginx反向代理

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐