javascript - 前后端分离部署,基于vue+axios+webpack,如何解决跨域请求?

问题描述

问 题

项目是用vue+axios+webpack来构建的,在开发测试阶段,因为利用webpack配置了跨域代理,所以开发的时候的跨域已经解决,可以正常访问服务端的数据.
但是当我build了项目,将生成的文件放到tomcat里面测试,发现之前配置的跨域代码不起作用了,http请求变成了localhost的本地请求,导致了接口请求的404错误了.

请问大神们,我该如何配置或者做什么修改,才达到前后端分别部署到两个不同服务器上,接口能正常请求呢?

 devServer: {
        historyApiFallback: true,
        noInfo: true,
        port: 8080,
        proxy: {
            '*': {
                target: 'http://xx.xx.xx.xx:58181/',
                changeOrigin: true,
                secure: false
            }
        }

上面的是我的webpack开发时解决跨域的配置.

解决方案

在代码中根据 process.env.NODE_ENV 区分是开发还是生产环境，然后设置不同的 url。

另外，服务器要设置 CORS 相关的 HTTP 头。

这篇关于javascript - 前后端分离部署,基于vue+axios+webpack,如何解决跨域请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！