前端如何通过Nginx代理做到跨域访问API接口

栏目: 服务器 · Nginx · 发布时间: 5年前

内容简介:废话不多说,我们直接打开nginx.conf文件

跨域 是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源

Nginx 作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问。对于浏览器来说,访问的就是同源服务器上的一个url。而nginx通过检测url前缀,把http请求转发到后面真实的物理服务器

一.配置Nginx

废话不多说,我们直接打开nginx.conf文件

server {
        
        listen  8888;
        
        server_name 127.0.0.1;

        location / {
            proxy_pass http://127.0.0.1:5500;
        }
        
        location /api{
            proxy_pass http://ip.taobao.com/;
        }
        
    }

配置解释:

我们在浏览器中输入 127.0.0.1:8888 自动会转发到 http://127.0.0.1 :5500

http://127.0.0.1 :5500 是本地所指向的地址,类似于vue开的的代理npm run dev 启动的一个地址

http://ip.taobao.com/ 是我们要访问的接口地址(淘宝检测ip地址来源的接口)

前端ajax的url地址 这样写 http://127.0.0.1 :8888/api/service/getIpInfo.php?ip=117.89.35.51,访问的url中有api nginx会自动换到所对应的location

前端实列代码:

//新建一个html文件把以下代码放入script标签中
$.ajax({
    //请求淘宝检测ip地址来源的接口
    url:'http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51',
    type:'get',
    success:function(res){
      console.log(res)
    },
    error:function(err){
      console.log(err)
    }
})

启动服务:

我是通过vsCode的Go live插件启动了一个127.0.0.1:5500的服务,有很多同学是通过node开启的代理,都一样,

然后我们在浏览器中输入127.0.0.1:8888上面nginx所配置

打开浏览器network数据返回如下,说明跨域访问成功

前端如何通过Nginx代理做到跨域访问API接口

二.其它跨域解决方案

1.jsonp 需要目标服务器配合一个callback函数。

2.window.name+iframe 需要目标服务器响应window.name。

3.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage,主要侧重于前端通讯。

4.node.js开启本地代理,类似于vue-cli中的devServer模式,阔以方便开启代理

5.CORS 需要服务器设置header :Access-Control-Allow-Origin。

6.Nginx反向代理,可以不用目标服务器配合,需要Nginx服务器,用于请求转发。

我个人认为4 、5 、6解决跨域问题在实际开发过程中显得更为重要

三.Nginx工具以及参考资料


以上所述就是小编给大家介绍的《前端如何通过Nginx代理做到跨域访问API接口》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

删除

删除

[英] 维克托•迈尔-舍恩伯格(Viktor Mayer-Schönberger)著 / 袁杰 译 / 浙江人民出版社 / 2013-1 / 49.90元

《删除》讲述了遗忘的美德,为读者展现了大数据时代的取舍之道。 《删除》从大数据时代信息取舍的目的和方法分别诠释了“被遗忘的权利”。维克托首先回溯了人类追寻记忆的过程,之后提出数字技术与全球网络正在瓦解我们天生的遗忘能力。对此,他考察了促进遗忘终止4大驱动力——数字化,廉价的存储器,易于提取,全球性访问。之后,他提出了当前数字化记忆的两大威胁——信息权力与时间,并给出了应对威胁的6大对策——数......一起来看看 《删除》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换