欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-11 21:24:27
前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。不过这种方式开发PC页面到还好,如果是移动端页面就不行了。 解 ......

前言

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

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

解决办法

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

举个栗子

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

原先:

调试页面是:

请求的接口是:

步骤一:

请求的接口是:

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的配置,很简单的。

步骤四:

访问:

搞定。

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转发请求之后,就能够让所要部署的静态页面不需要放在跟请求接口同域的地方。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :