电子网站建设设计营销型网站模板

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

首先先查看前端代码的根目录下，有没有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})
}

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