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

时间: 2019-02-15阅读: 795标签: nginx

跨域是指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数据返回如下,说明跨域访问成功



二.其它跨域解决方案

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在线配置生成工具(需要翻墙)
如何提高Nginx的性能
Nginx常用命令
Nginx 配置简述(小胡子哥)

来自:https://segmentfault.com/a/1190000018163817


Nginx 操作响应头信息

前置条件:需要编译 ngx_http_headers_module 模块,才支持 header 头信息操作,add_header意思为将自定义的头信息的添加到响应头,可以声明多个 add_header 指令

Web前端必备-Nginx知识汇总

Nginx是一个高性能、轻量级的Web和反向代理服务器, 其特点是占有内存及资源少、抗并发能力强。Nginx安装简单、配置简洁、启动快速便捷、支持热部署、支持 SSL、拥有高度模块化的设计。

nginx http内核模块提供的变量和解释

ngx_http_core_module模块在处理请求时,会有大量的变量,这些变量可以通过访问日志来记录下来,也可以用于其它nginx模块 。顺便对ngx_http_core_module模块提供的变量总结了下,如下所示:

Nginx反向代理与负载均衡

反向代理指的是以代理服务器接收用户的的访问请求,代理用户向内部服务器重新发起请求,最后把内部服务器的响应信息返回给用户。这样,代理服务器对外就表现为一台服务器,而访问内部服务器的客户端用的就是代理服务器,而不是真实网站访问用户。

nginx 修改 max open files limits

注意:修改 nginx 的 max open files 有个前提,就是你已经修改好了系统的 max open files.先查看 nginx 的 ulimits: 但是还是不够,你这样改了之后,nginx 的并发能力反而会下降,所以还需要改一个关键的参数:

nginx+php执行请求的工作原理

先了解下常听说的cgi,php-cgi,fastcgi,php-fpm到底是什么关系,帮助了解php的工作原理。cgi协议用来确定webserver(例如nginx),也就是内容分发服务器传递过来什么数据,什么样格式的数据。php-cgi是php的cgi协议进程解释器

深入 Nginx 之架构篇

Nginx 作为业界知名的高性能服务器,被广泛的应用。它的高性能正是由于其优秀的架构设计,其架构主要包括这几点:模块化设计、事件驱动架构、请求的多阶段异步处理、管理进程与多工作进程设计、内存池的设计,以下内容依次进行说明。

Nginx服务器 之反向代理与负载均衡

客户端就可以通过请求代理服务器,获取想要的资源,但客户端并不知道给他资源的是哪个服务器。这种方式就是反向代理。当一台服务器的单位时间内的访问量越大的时候,服务器的压力会越大。我们通常通过负载均衡的方式来分担服务器的压力。

nginx去掉url中的index.php

使用情境:我想输入www.abc.com/a/1后,实际上是跳转到www.abc.com/index.php/a/1,配置Nginx.conf在你的虚拟主机下添加:如果你的项目入口文件在一个子目录内,则.

Nginx解析PHP的原理 | CGI、FastCGI及php-fpm的关系

php-fpm采用master/worker架构设计, master进程负责CGI、PHP公共环境的初始化及事件监听操作。worker进程负责请求的处理功能。在worker进程处理请求时,无需再次初始化PHP运行环境,这也是php-fpm性能优异的原因之一

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

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

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