前言
在vite构建的本地开发环境中,请求第三方接口时如何解决跨域问题呢?
本地开发环境,只要请求接口,如果没有做代理配置,都会存在同源策略,跨域的问题,要么在本地做代理,要么在服务器做代理,要么在请求头中设置允许跨域,下面我们来介绍下如何解决vite构建的本地开发环境请求第三方接口时如何解决跨域问题
解决方案
配置代理
在vite.config.js
中配置代理,添加server
对象,并配置proxy
代理,当在组件中请求/api
开头的接口时,会代理到http://v.juhe.cn
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
// 解决本地接口请求跨域的问题,配置server
server: {
https: false,
// 是否自动在浏览器打开
open: true,
cors: true,
proxy: {
'/path': {
target: 'https://v0.yiketianqi.com', // 接口域名,接口服务器地止
changeOrigin: true,
secure: false,
rewrite: (