使用 Vue + axios 时，返回状态200，返回值被浏览器拦截

一、前言

在使用 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,
		},
	});

---

参考文档：

• GitHub - axios-docs

• MDN - Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’