我正在使用' angular2-webpack-stater'项目并准备与我的后端服务器集成。我使用两个代理传递来设置nginx以连接到前端和后端:
server {
listen [::]:443 ssl;
listen 443 ssl;
server_name xxxxxxxxx.com;
add_header Strict-Transport-Security "max-age=31536000;
includeSubdomains";
root /var/www;
index index.php index.html index.htm;
autoindex off;
rewrite_log on;
location ^~ /server/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-NginX-Proxy true;
proxy_pass https://127.0.0.1:9000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location ^~ /front/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-NginX-Proxy true;
proxy_pass https://127.0.0.1:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
...
}
后端按预期工作。当我使用&nbsp运行服务器'运行前端时,浏览器将在' localhost:3000 /#/'所有工作都按预期进行。
但是当我尝试使用以下方式访问前端时
https://xxxxxxx.com/front/#/
(而不是使用localhost:3000 /#/)我看到:
<% if (webpackConfig.htmlElements.headTags) { %> <%= webpackConfig.htmlElements.headTags %> <% } %> Loading... <% if (htmlWebpackPlugin.options.metadata.isDevServer && htmlWebpackPlugin.options.metadata.HMR !== true) { %> <% } %>
因为尝试GET时出错:
https://xxxxxxx.com/webpack-dev-server.js
来自index.html文件的。这在<script src="/webpack-dev-server.js"></script>
失败,因为它无法找到webpack-dev-server.js文件。
为什么世界上有什么区别? 对于那些走在这条道路上的人,我们将非常感谢您的帮助。我看起来很高,也没有找到任何解决方案。有关通过localhost访问而不是主机名的魔力是什么?我已经链接了:
/var/www/front --> project/src or project/dist and had no luck!
这并不觉得应该这么难!显然,我不了解webpack和webpack-dev-server如何提供静态文件。
谢谢!
除了: 对于任何试图解决服务器端(快速服务器)上的cors问题的人,我需要在app.js文件中添加此代码:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
next();
});
app.options("/*", function(req, res, next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, x-xsrf-token');
res.sendStatus(200);
});
然后允许在不同端口上从前端到后端的完整通信。
答案 0 :(得分:2)
前端需要额外的资源,它相对于root请求。您正试图强制它进入子目录。
显然,URI /webpack-dev-server.js
适用于//127.0.0.1:3000
,但从/front/webpack-dev-server.js
访问时需要//example.com
。
这是一个非常常见的问题,有些应用程序可能会非常顽固地被强行插入子目录。
根据您对应用程序的控制程度,您可以考虑:
1)使用路径相对URI而不是路径绝对URI。例如:
src="webpack-dev-server.js"
2)配置您的应用程序以使用正确的子目录(当然会中断//127.0.0.1:3000
)。例如:
src="/front/webpack-dev-server.js"
3)如果这是一个单用途服务器,请将前端移动到根目录中。例如:
location ^~ /server/ {
proxy_pass https://127.0.0.1:9000/;
...
}
location / {
proxy_pass https://127.0.0.1:3000;
...
}