前言

在使用 Vue + TypeScript + axios 时,后端已经配置了Cors的前提下,但是在请求接口的时候,返回状态为 200,但是返回值却被浏览器给拦截了。


解决方案

1. 在全局定义

在 main.ts(main.js) 中增加一条 axios 的配置,withCredentials 默认为 false,所以为一条。

	import Vue from 'vue';
	import App from './App.vue';
	import router from './router';
	import axios from 'axios';

	Vue.config.productionTip = false;

	// 不能设置为 true
	axios.defaults.withCredentials = false;
	// 定义代理服务器的主机名和端口
	axios.defaults.proxy = {
  		host: 'http://localhost', 
  		port: 5000,
	};

	new Vue({
  		router,
  		render: (h) => h(App),
	}).$mount('#app');
2. 单独定义

将 proxy 直接定义到单个请求中

	let url = `http://localhost:5001/identity`;
	const result = await axios({
		method: 'GET',
		url,
		proxy: {
			host: 'http://localhost',
			port: 5001,
		},
	});


参考文档

Logo

前往低代码交流专区

更多推荐