由于浏览器的同源策略,前后端分离的项目,调试的时候总是会遇到跨域的问题,这里通过修改前端代码解决跨域问题。
首先先查看前端代码的根目录下,有没有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})
}
在调用后端接口时,传参时只需要拼接后面那部分就可以了