vue3.0 + axios + Vite如何解决cors服务器问题?

kyxcudwk  于 5个月前  发布在  iOS
关注(0)|答案(1)|浏览(90)

在我的vite.js.js文件中:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    cors: true,
    proxy: {
      "/api": {
        target: "http://localhost:8088",
        secure: false,
        changeOrigin: true,
        rewrite: (path) => {console.log(path); return path.replace(/^\/api/, '')}
      }
    }
  }
})

字符串
在我的axios.js配置中:

import axios from "axios";

let config = {
    baseURL: 'http://localhost:8088/api',
    timeout: 1000,
    withCredentials: true
}

const instance = axios.create(config)

export default instance


然后在我的页面中发送这样的请求

$axios.post('/user/login', {
        u_account: ruleForm.account,
        u_password: ruleForm.password
    }).then((response) => {
        if (response.data.code === 200) {
            let token = response.data.token
            console.log('success!')
            window.localStorage.setItem('token', token)
        } else {
            console.log('failed');
        }
    }).catch((err) => {
        console.log(err.message)
    })


然后我又遇到了cors请求的问题
我尝试将axios.js -> baseURL重写为'api',但仍然不起作用,有人能帮忙吗?

zte4gxcn

zte4gxcn1#

只需将Axios示例配置更新为以下内容:

let config = {
    baseURL: "/api",
    timeout: 1000,
    withCredentials: true
}

字符串
此外,删除cors属性值false,并使其成为对象,如下所示

cors: {
      origin: "*",
      methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
      preflightContinue: true,
      optionsSuccessStatus: 204,
      credentials:true,
    }


假设您的服务器URL是http://localhost:8088,这应该可以解决这个问题

相关问题