How to solve cross-domain problems when the local development environment built by vite requests a third-party interface

Preface

In the local development environment built by Vite, how to solve the cross-domain problem when requesting a third-party interface?

In the local development environment, as long as the interface is requested, if there is no proxy configuration, there will be same-origin policy and cross-domain problems. Either proxy locally, proxy on the server, or set the request header to allow cross-domain. Let's do this below. Introducing how to solve the cross-domain problem when the local development environment built by Vite requests a third-party interface.

solution

Configure proxy

Configure the proxy invite.config.js, add theserver object, and configure theproxy proxy, when requesting< in the component /span>When the interface starts with /api, it will be proxied tohttp://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/, '')
    },
   }
 }
})

In a single-file component, when requesting an interface, the address of the interface starts with /path/, and that’s fine. If you write the complete address, an error will be reported and a cross-domain situation will occur< /span>

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);
   }
}

If you don’t use axios, you can also use fetch, but it needs to be converted

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

In terms of PC and mobile compatibility, the returned response body is readable stream, and the request does not include cookie by default. Configuration items need to be added (fetch(url,{credentials:'include'}))If token authority verification is involved, it is not appropriate to use fetch

does not support abort and does not support timeout control. Timeout control implemented using setTimeout and promise.reject cannot prevent The request process continues to run in the background, which will cause traffic congestion

fetchThere is no way to monitor the progress of native requests, but XR can

Excellent score:

Syntax simplification, semantics
Standard-based promise implementation, supportasync/await
Lower level, providing rich API
Breaking away from XHR, it is a new implementation method in the ES specification

Notice

It should be noted that in the production environment, the proxy needs to be turned off, otherwise an error will be reported, because in the production environment, the interface server address is different, so the proxy needs to be turned off

In the production environment, the proxy should be implemented inweb the server, which means that back-end students need to provide support

Front-end and back-end development interface joint debugging and docking parameters

2023-09-13