使用 Vue + axios 時，返回狀態200，返回值被瀏覽器攔截

目錄

• 一、前言
• 二、解決方案
• 1. 在全局定義
• 2. 單獨定義

一、前言

在使用 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 ‘*’