大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么用Nginx解决前端跨域问题-创新互联

这篇文章主要介绍了怎么用Nginx解决前端跨域问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联是一家专业的成都网站建设公司,我们专注网站制作、成都网站建设、网络营销、企业网站建设,外链1元广告为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。

前言

在开发静态页面时,类似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解决前端跨域问题-创新互联
标题链接:http://dzwzjz.com/article/djopjc.html
在线咨询
服务热线
服务热线:028-86922220
TOP