vue中使用ajax访问接口,跨域方法

文章介绍了如何在JavaScript中使用jsonp解决跨域问题,包括jQuery的使用,以及在Vue项目中通过devServer的proxy配置和Nginx的反向代理进行跨域处理,同时提到了cookie的管理策略。
摘要由CSDN通过智能技术生成

解决方案: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反向代理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值