如何用Nginx解决前端跨域问题_前端代理配置资源-CSDN文库

178 浏览量 2021-01-10 04:49:36 上传评论收藏 50KB PDF 举报

资源推荐

资源详情

资源评论

如何用如何用Nginx解决前端跨域问题解决前端跨域问题

前言前言

在开发静态页面时，类似Vue的应用，我们常会调用一些接口，这些接口极可能是跨域，然后浏览器就会报cross-origin问题不

给调。

最简单的解决方法，就是把浏览器设为忽略安全问题，设置–disable-web-security。不过这种方式开发PC页面到还好，如果

是移动端页面就不行了。

解决办法解决办法

使用Nginx转发请求。把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址。

举个栗子举个栗子

例如我们在开发一个Vue应用。

原先：原先：

调试页面是： http://192.168.1.100:8080/

请求的接口是： http://ni.hao.sao/api/get/info

步骤一：步骤一：

请求的接口是： http://192.168.1.100:8080/api/get/info

PS：这样就解决了跨域问题。

步骤二：步骤二：

安装好Nginx后，去到/usr/local/etc/nginx/目录（这是Mac的），修改nginx.conf文件。

步骤三：步骤三：

把默认的server配置注释掉。

在下面增加：

server{

listen 8888;

server_name 192.168.1.100;

location /{

proxy_pass http://192.168.1.100:8080;

}

location /api{

proxy_pass http://ni.hao.sao/api;

}

}

保存后，启动Nginx。

PS：并不需要太了解Nginx的配置，很简单的。

步骤四：步骤四：

访问： http://192.168.1.100:8888/

搞定。

PS：注意访问的端口是‘8888’，有其他域的地址继续加location就行了。

错误示范

我一开始不太懂Nginx的配置，以为可以如下配置。

server{

listen 8080;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38559992

粉丝: 3
资源: 927

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip