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

时间: 2019-01-15阅读: 920标签: 跨域

前言

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

 本文地址 :http://www.cnblogs.com/lovesong/p/10269793.html


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1823

nginx 反向代理处理跨域问题

正向代理是你发出请求的时候先经过代理服务器,所以实际上发出请求的是代理服务器。反向代理是“代理你的目标服务器”,请求目标服务器的代理,做一些处理后再真正请求。在这篇文章里,反向代理用于处理跨域问题。

缓存竟也能导致跨域问题!

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:

jsonp跨域原理,jsonp和ajax的区别?

Jsonp原理是动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。Ajax是页面无刷新请求数据操作,Jsonp不是真正的ajax请求。讲解Ajax 和 jsonp的区别,在jquery中使用jsonp

node.js如何配置跨域?

在node.js中可以使用res.header()方法来配置跨域。res.header()方法可以用来设置允许跨域的域名、允许的header类型、跨域允许的请求方式等。

Js通过Web代理发起跨域请求

XMLHttpRequest对象(IE中为XMLHTTP对象)是AJAX应用的核心。由于现代浏览器对跨域请求的限制,在使用时需多加注意。本教程尽量用简单易懂的话描述(跨域)问题,并提供一个方案:通过Web代理(Web Proxy)

使用CSS3特性做跨域,跨域还可以这样玩

利用js动态创建一个link插入到文档中, 请求css文件,利用 computedStyle = window.getComputedStyle 获取指定元素的 style 对象,利用 computedStyle .content 获取内容

web网站ajax跨域方法总结与解决方案

web前端的同学如果使用ajax,如果请求后端地址和页面访问的地址“URL的首部”不同就会出现访问被拒绝的情况,这就需要跨域来解决前后端的通讯问题,下面将列举一些在实际项目中应用也是比较多的方法。

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

JSONP跨域请求数据的三种方式

原生方式需要定义一个回调函数,用来接收和处理数据。获取数据的地址包含这个回调函数名。新建一个<script>标签,地址赋值给标签的src。

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广