Angular跨域设置在部署时出现的问题及解决方法

按照网上许多的写法操作,先是创建一个proxy.json文件,写下代理设置,如下代码。代表所有以/api为相对地址开头的请求都将转向http://localhost:8080/api,按照这种方法,在开发模式下完全正常,可以跨域请求。

 1 {
 2     "/api":{
 3         "target": "http://localhost:8080/api",
 4         "secure": false,
 5         "logLevel": "debug",
 6         "changeOrigin": true,
 7         "pathRewrite": {
 8             "^/api": "/"
 9         }
10     }
11 }

        但是当将项目部署到tomcat服务器时,(index.html文件位于webapps/dist里),此时出现了问题,部分组件里的请求可正常跨域请求,而部分组件里的请求却始终不正常,请求地址总是多出一个dist,例如本应请求http://localhost:8080/api/login,却变成了向http://localhost:8080/dist/api/login请求,而且读取assets静态文件的路径也出错。始终不能明白是什么原因导致这样的问题,如有大虾知道,请留言告知。我的解决方法是将所有文件迁移至ROOT里部署,这样就把http://localhost:8080直接指向了项目index,html,另外再把assets里的静态文件复制一份到tomcat的webapps文件夹里(即在webapps下创建一个assets文件夹,只复制那些指向不正确的静态文件,根据控制台的报错信息来确定需要复制哪些)。

       其实更好的方法是不要使用tomcat作为angular的web服务器,只用它作为java后端服务器,而angular前端服务器则采用nginx服务器。把angular生成的dist文件整个复制到nginx服务器的html文件夹下,然后修改服务器的conf文件夹下的nginx.conf文件,只修改如下图几行即可。这时,访问http://localhost:8081就是静态页面的主页,而请求相对地址为/api开头的地址将自动转化为以http://10.69.194.15:8080/api为开头的地址(即后端服务器地址)。

Angular跨域设置在部署时出现的问题及解决方法

 

上一篇:Tomcat服务器安装与配置


下一篇:nginx实现反向代理