Vue3 项目配置*解决跨域

 

1.创建项目根文件.env.dev 文件和node_modules文件同级（注意文件后缀名.dev）

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = ''

 

这里请求封装的js文件 VUE_APP_BASEURL对应的上面的环境变量 如果没有使用环境变量 这里就写空字符串

 

request.js请求封装

import axios from 'axios'

const service = axios.create({
	baseURL: process.env.VUE_APP_BASEURL, // api 的 base_url
	timeout: 5000 // request timeout
})


// 不需要token验证的 接口白名单
// const APIURL = ['users/login']
// 请求拦截  设置统一header
service.interceptors.request.use(
	config => {
		return config;
	},
	error => {
		return Promise.reject(error)
	}
)

// 响应拦截  401 token过期处理
service.interceptors.response.use(
	response => {
		
		return response
	},
	error => {

		return Promise.reject(error)
	}
)

export default service

2.在项目根目录 创建 vue.config.js

项目是http://localhost:8080 让接口请求指向https://www.baidu.com 端口地址(解决跨域)

module.exports = {
    devServer: {
        proxy:'https://www.baidu.com', // 请求的ip或者 如果是域名：域名:端口号
	public:'http://localhost:8080',// 本地的ip:端口号
	port:8080
    }
}

 

到这里就完成代理，在使用axios的时候直接url传入接口地址，不需要前面的域名或者ip，

在进行请求的时候会自动添加加上本地服务器地址，本地服务器地址会重新指向请求资源的服务器地址获取数据

 

我是马丁的车夫，欢迎转发收藏！