Vue解决跨域问题及每次请求session不一致的问题-补充文章

harveymomo

已于 2022-09-17 14:47:16 修改

阅读量811

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-09-17 14:28:31 首次发布

本文链接：https://blog.csdn.net/liuzhang6966/article/details/126904899

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.前端：

request.js
-------------------------------------
import axios from 'axios'

export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,
   // baseURL: 'http://3710666.cn:4000/',
    timeout: 10000,
    withCredentials: true,
    crossDomain: true
  })
------------------------------------------------------
.env 文件：
VITE_HOST = '10.10.1.122'
VITE_PORT = 8080
VITE_BASE_URL = '/api'
VITE_OUTPUT_DIR = 'dist'
VITE_API_DOMAIN = 'http://10.10.19.232:8080/' #//本地环境地址（可用于开发时联调）

-------------------------------------------------------------------------
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //中转服务器
  server:{
    //通过代理实现跨域 http://localhost:20219
    port: 5000,
    open: true, //在服务器启动时自动在浏览器中打开应用程序
   proxy:{
    '/api':{
      //替换的服务器地址
      target: 'http://10.10.19.232:8080/',
      //开启代理 允许跨域
      changeOrigin: true,
      //设置重写的路径
      rewrite: (path) => path.replace(/^\/api/, ""),
    }
   }
  }
})

2.前端请求地址：

http://127.0.0.1:5000/login

注意点：

1. VITE_BASE_URL = '/api'

前端本地调试地址为：127.0.0.1:5000/api

在.env.development中

VUE_app_BASE_URL=/api

在.env.production中

VUE_app_BASE_URL=http://服务器ip:端口

在axios封装里面

axios.defaults.baseURL=process.env.VUE_app_BASE_URL