通过nginx反向代理解决前端访问的跨域问题

dongxiawu 发布于2019-08-23 11:39 / 1665人阅读

摘要：三反向代理解决的原理将安装在本地，然后将项目部署于下，这样访问本地项目时用本地项目即可访问。这样浏览器之间的请求完全满足浏览器域名协议端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。

一、问题背景说明：
编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题，如何在不改变后台接口的情况下解决跨域问题？

二、同源/跨域概念说明：
同源策略：是浏览器的一种安全策略，所谓同源是指域名、协议、端口完全相同，只有同源的地址才可以相互通过ajax的方式请求。
跨域：同源或不同源说的是两个地址之间的关系，不同源地址之间的请求我们称之为跨域请求。

三、nginx反向代理解决的原理：

将nginx安装在本地，然后将项目部署于nginx下，这样访问本地项目时用http://localhost/本地项目即可访问。
然后配置nginx，通过反向代理的方式访问后台服务器，访问后台接口时使用http://localhost/后台接口名称即可跳转到后台服务器。
这样浏览器之间的ajax请求完全满足浏览器域名、协议、端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。

四、安装和配置nginx
过程主要参考了以下两篇文章，对原理的描述很清晰、完善：
nginx解决跨域文章：https://www.cnblogs.com/renji...
nginx配置文章：http://www.cnblogs.com/renjin...

1）首先到nginx官网下载安装包：http://nginx.org/en/download....
2）windows版本nginx使用方法简要说明（cmd窗口下）：
帮助： nginx -h
启动： start nginx
重载（nginx配置更新后可使用）：nginx -s reload
停止： nginx -s stop 或者 nginx -s quit
3）nginx.conf 配置本地web项目访问路径和反向代理：

    server {
        listen       80;              //nginx服务器启动后的默认监听端口，可按自身情况修改
        server_name  localhost;        //nginx服务器的名称，

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        //以下是本地项目的部署配置：配置web服务器的根目录访问地址
        location / {
            root   myApp/mobile;
            index  index.html index.htm;
        }
        
        //以下是反向代理访问远程的后台接口的配置
        location /remote-interface/{
        //下面是反向代理配置，通过nginx服务器访问本地/remote-interface时，会将请求转到后台实际服务器去处理
            proxy_pass  http://remote-address/remote-interface/ ; 
        }

以上就是nginx本地项目部署和反向代理的配置。配置完成后，即可在项目中使用ajax请求访问后台接口。

五、发送ajax请求试验
本地项目中的ajax请求的代码示例如下，重点注意ajax请求的URL，要与nginx.conf的配置对应上：

var reqData = {             //post请求参数
                    "xxx":xxx,
            }

            $.post("/remote-interface/interface-name", reqData, function (data, status) {
                // console.log(arguments);
                if (status != "success") {     //post请求响应为失败的处理
                    console.log(status);
                    return;
                }
            
            ///请求得到响应数据后的处理操作可写在这里
               
            }, "json").error(function () {
                // console.log(arguments)
            });

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97273.html

通过nginx反向代理解决前端访问的跨域问题

摘要：三反向代理解决的原理将安装在本地，然后将项目部署于下，这样访问本地项目时用本地项目即可访问。这样浏览器之间的请求完全满足浏览器域名协议端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。一、问题背景说明：编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题...

paulquei 2019-07-25 14:26 评论0 收藏0
前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0
彻底弄懂跨域问题

摘要：浏览器同源策略我们为何要研究跨域问题因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

CoorChice 2019-08-23 14:41 评论0 收藏0
彻底弄懂跨域问题

摘要：用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

rose 2019-07-25 14:36 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

edgardeng 2019-08-23 14:57 评论0 收藏0