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

站长资源 2024/11/25 佚名

22 1538 22

DDR爱好者之家 Design By 杰米

前言

在开发静态页面时，类似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;
    server_name 192.168.1.100;
 
    location /api{
      proxy_pass http://ni.hao.sao/api;
    }
  }

之所以这么写，是我认为这样可以让Nginx帮我监听8080的请求，然后只转发匹配的请求。我没有意识到的是Nginx这么写后，是需要占用8080端口的。

既然需要占用端口，那也就不能再被其他相同协议的进程占用，就导致开发的页面无法以8080端口启用。经同事提点，才想起这事情，换下思路，就有了最上面的方法。

总结

其实不仅是在开发调试时候能这么干，在生产环境也能这么玩。利用Nginx转发请求之后，就能够让所要部署的静态页面不需要放在跟请求接口同域的地方。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Nginx,前端跨域,Nginx,跨域

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“如何用Nginx解决前端跨域问题”

暂无评论...

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

Nginx+SSL实现双向认证的示例代码

linux nc命令小结

评论“如何用Nginx解决前端跨域问题”

更新日志

友情链接