vite构建的本地开发环境请求第三方接口时如何解决跨域问题

news2024/11/25 12:50:37

前言

在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: (path) => path.replace(/^\/path/, '')
    },
   }
 }
})

在单文件组件中,请求接口时,接口的地止以/path/开头,就可以了的,如果写完整的地止,会报错出现跨域情况

import axios from "axios";

async function getWeatherData() {
  try {
       const params = {
              unescape:1,
              version:'v61',
              appid: 69617844,
              appsecret:'Cus4jy7S',
              cityid: this.value
        }
        const response = await this.$axios.get('/path/api',{params});
        console.log(response);  
   catch (error) {
    console.log(error);
   }
}

如果不用axios,用fetch也可以,但是需要转化

fetch("https://v0.yiketianqi.com/api?unescape=1&version=v61&appid=69617844&appsecret=Cus4jy7S").then(res => {
    res.json().then(json => console.log(json))
})

在pc端和移动端兼容性,返回的response body是readable stream，请求默认不带cookie,需要添加配置项(fetch(url,{credentials:'include'}))如果涉及到token权限验证,那使用fetch就不是很合适

不支持abort，不支持超时控制,使用setTimeout及promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,会造成流量的良妃

fetch没有办法监测原生请求的进度,而XR却可以

优点: