当前位置：首页 > news >正文

跨域问题前端解决

news 来源：原创 2025/6/17 3:22:16

由于浏览器的同源策略，前后端分离的项目，调试的时候总是会遇到跨域的问题，这里通过修改前端代码解决跨域问题。

首先先查看前端代码的根目录下，有没有vue.config.js文件, 若有，使用方法1，若没有此文件，使用方法2

方法1

将vue.config.js修改如下：

module.exports = {
  devServer: {
    // 设置为0.0.0.0则所有的地址均能访问
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 跨域问题解决 代理（关键部分）
    proxy: {
      '/api': {
        target: 'http://localhost:8081',  // 设置后端接口的访问地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 将请求路径中的 '/api' 替换为空字符串
        }
      }
    }
  }
}

方法2

在项目根目录的/config/index.js文件中，找到 proxyTable，然后进行同样的配置：

proxyTable: {
      '/api': {
        target: 'http://localhost:8081',  // 设置后端接口的访问地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 将请求路径中的 '/api' 替换为空字符串
        }
      }
    },

通过方法1或者方法2配置好之后，设置axios请求的baseURL属性: '/api',相当于用'/api'代理请求后端的url

const request = axios.create({
  baseURL: '/api',
  timeout: 5000
});

export default request;

可以参考我的方式，将请求的API进行封装

import Vue from 'vue'
import request from '@/api/request'

// axios.defaults.baseURL = "/api"
export function postAction(url, parameter) {
  return request({
    url: url,
    method: 'post',
    data: parameter
  })
}

在调用后端接口时，传参时只需要拼接后面那部分就可以了