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

Posted 2021-06-18 wwwzgy

按照网上许多的写法操作，先是创建一个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为开头的地址（即后端服务器地址）。