Vue 前端配置跨域

目录

• Vue 前端配置跨域
  • 添加vue.config.js文件
  • 修改main.js
• 好文推荐

Vue 前端配置跨域

Nginx、后端网关层已经全部配置跨域，VUE前端仍然会偶发性发生跨域问题，故此决定，前端也进行跨域配置，具体操作如下：

添加vue.config.js文件

复制module.exports = {
	devServer: {
		host: 'localhost',  // 本地主机
		port: 5000,  // 端口号的配置
		open: true,  // 自动打开浏览器
		proxy: {
			'/api': {   //  拦截以 /api 开头的接口
				target: 'http://111.11.118.37:6300/api',//设置你调用的接口域名和端口号 别忘了加http
				changeOrigin: true,    //这里true表示实现跨域
				pathRewrite: {
					'^/api': ''
				}
			}
		}
	}
}

// 注意：修改了配置文件后一定要重启才会生效;

修改main.js

不做这个配置，只会自动打开软件，但是api无法通过代理访问

import axios from 'axios'
axios.defaults.baseURL = '/api'

好文推荐

vue前端跨域解决方案：https://blog.csdn.net/qq_43353619/article/details/111058749