Vue Springboot Nginx跨域问题

跨域问题分为开发和生产环境
开发环境：
不需要Nginx

前端：
在axios封装

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:1234',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8843, // can be overwritten by process.env.PORT, if port is in use, 
}

后端

@Controller
public class LoginController {
	
	@Autowired
	UserService userService;

    @CrossOrigin
    @PostMapping(value = "/api/login")
    @ResponseBody
    public Result login(@RequestParam Map map, HttpSession session) {

开发环境，配环境真是拼老命了，前后端api保持不变
前端：
封装axios中，有环境切换的实现

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'http://localhost:1122/api';
} else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'http://localhost:1122/api';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = '/api';
    // axios.defaults.baseURL = '';
}

Nginx中配置跨域：

    location /api {
        proxy_pass http://localhost:1234/api;
    }

debug过程
首先确定前端可以访问，后端的接口可以访问，然后分析代码，根据浏览器network中request URL的请求URL，调整前端baseURL和Nginx中的proxy_pass，使其可以访问到后端的端口
感觉Nginx其实做的就是一个替换

前端小白，一点点摸索开发和debug的方法