angular5 nginx跨域问题

最新推荐文章于 2023-07-21 12:00:01 发布

原创最新推荐文章于 2023-07-21 12:00:01 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

angular2 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种解决 Angular5 跨域问题的方法：一种适用于开发阶段，通过修改 Chrome 参数禁用 Web 安全检查；另一种适用于线上环境，利用 Nginx 进行代理配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular5的跨域问题比较烦，折腾了半天，终于搞定了。现写出解决办法。

测试环境可用第一种，线上环境用第二种。

第一种：angular5开发过程中可以给chrome加入参数： --args --disable-web-security --user-data-dir来解决跨域问题。

在chrome快捷方式上右键，追加参数：

第二种：angular5开发完项目后，发现存在跨域问题，可以配合nginx来解决。

打开nginx.conf

配置如下：

server {
listen 8081;
server_name 127.0.0.1;

#charset koi8-r;

# access_log logs/host.access.log main;

location / {
root D:\git\fep_dev\AITeller-ng-manage-platform\dist;
index index.html;
}

location /manage_platform/{
proxy_pass http://127.0.0.1:8083/manage_platform/;
#proxy_cookie_path /manage_platform /manage_platform;
}

}

}

意思是nginx监控本地8081端口，location /：当输入http://127.0.0.1:8081时，会进入到index.html。

请求http://127.0.0.1:8081/manage_platform时，会将请求转到http://127.0.0.1:8083/manage_platform/.如果contextPath一样，就不用管cookie了。否则，就需要设置proxy_cookie_path 。如果设置为：proxy_cookie_path /manage_platform2 /manage_platform;意思就是将/manage_platform2转到/manage_platform下。一般会这样设置：

location /manage_platform/{
proxy_pass http://127.0.0.1:8083/manage_platform2/;
proxy_cookie_path /manage_platform2 /manage_platform;
}