前端 nginx 配置 解决 chrome 跨域问题

本文介绍了解决前端开发中跨域问题的方法,包括配置谷歌浏览器进行跨域访问及通过nginx代理实现跨域请求。同时提供了使用vue项目的devserver配置来解决跨域问题的示例。

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

描述:前端本地开发访问后端接口地址,chrome控制台报错跨域问题

 解决:

方法一:谷歌浏览器快捷方式配置跨域模式

Chrome浏览器的跨域设置----包含新老版本两种设置

方法二:nginx配置跨域

(1)nginx新建代理访问本地运行页面地址,注意端口号不要冲突

(2)配置“/api”(命名可自定义,同一个开头替换所有需要跨域的接口地址)代理访问需要跨域的接口地址。

注:

proxy_pass 后的接口地址若以斜杠 “ / ”结尾,则全部替换 “ /api ”。如 http://localhost:8085/api/regist   替换 接口地址/regist

proxy_pass 后的接口地址若不以斜杠 “ / ”结尾,则包含“ /api ”。如 http://localhost:8085/api/regist   替换 接口地址/api/regist

注:chrome版本升级之后(106.0.5249.62),方法一不生效。后采用方法二解决问题

补充:

vue项目可以通过配置devserver解决本地请求跨域问题

(示例:uniapp项目)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值