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

最新推荐文章于 2024-07-08 22:35:21 发布

Upgrader

最新推荐文章于 2024-07-08 22:35:21 发布

阅读量3.8k

点赞数 1

分类专栏： axios 跨域 Vue 文章标签： axios 跨域

本文链接：https://blog.csdn.net/Upgrader/article/details/89602834

版权

Vue 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

跨域

1 篇文章 0 订阅

订阅专栏

前言

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