1.定义

跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

2.跨域访问示例

假设有两个网站,A网站部署在:http://localhost:7999 即本地ip端口上;B网站部署在:http://localhost:8112 即本地ip端口82上。

现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(这里使用jquery的异步请求):

修改前的js代码:在服务器:localhost:7999服务,访问localhost:8112端口的资源

$(function () {
$.ajax({
method:'GET',
url:'http://localhost:8112/visual/test/?a=1&b=2',
success:function (arg) {
alert(arg)
}
})
});

修改后的ajax请求:

$(function () {
$.ajax({
method:'GET',
url:'/proxy/visual/test/?a=1&b=2',
success:function (arg) {
alert(arg)
}
})
});

nginx的最新配置:

server {
listen ;
server_name localhost; charset utf-; access_log /val/log/test/.log access; location / {
root //usr/local/server/test_service/public;
index index.html index.htm index.php; if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s=/$ last;
break;
}
} #error_page /.html; error_page /50x.html;
location = /50x.html {
root html;
} location ~ \.php$ {
root /usr/local/server/test_service/public;
fastcgi_pass 127.0.0.1:;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
} location ^~/proxy/{ // 这是需要添加的配置 proxy和上面ajax开头的url一致, 表示拦截/proxy的请求
rewrite ^/proxy/(.*)$ /$ break; 表示匹配到后就暂停匹配
proxy_pass http://localhost:8112/; 表示将匹配到的转发到你需要访问的服务的主机和端口
}
}

ngnix 反向代理来解决前端跨域问题的更多相关文章

  1. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  2. 用nginx的反向代理机制解决前端跨域问题

    什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制 ...

  3. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  4. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

  5. JAVA解决前端跨域问题。

    什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...

  6. 配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题

    配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题 - 大venn的博客 - CSDN博客https://blog.csdn.net/u011135260/article/details/ ...

  7. 完美解决前端跨域之 easyXDM 的使用和解析

    前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...

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

    前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...

  9. nginx反向代理-解决前端跨域问题

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

随机推荐

  1. ios中safari无痕浏览模式下,localStorage的支持情况

    前言 前阶段,测试提了个bug,在苹果手机中无痕模式下,搜索按钮不好使,无法跳页,同时搜索历史也没有展示(用户搜索历史时使用localStorage存储). 正文 iOS上Sarfari在无痕模式下, ...

  2. zt 正则

    http://deerchao.net/tutorials/regex/regex.htm     正则表达式30分钟入门教程 版本:v2.3.5 (2017-6-12) 作者:deerchao 转载 ...

  3. SSL通信-忽略证书认证错误

    .NET的SSL通信过程中,使用的证书可能存在各种问题,某种情况下可以忽略证书的错误继续访问.可以用下面的方式跳过服务器证书验证,完成正常通信. 1.设置回调属性ServicePointManager ...

  4. matplotlib图例-【老鱼学matplotlib】

    图例是啥,直接上图就知道了: 怎么创建上面的图例呢? 很简单,首先在plt.plot()函数中设置label文本属性,然后调用plt.legend()生成图例就可以了,完整的代码如下: import ...

  5. 微信小程序--家庭记账本开发--07

    最终展示以及相关代码 1.最终效果展示 最终效果展示已经根据最初要求使用视频拍摄在抖音上,下面是相关页面展示图片: 2.相关代码 本次开发主要页面则是首页界面以及记账界面以及实现页面跳转,以及记账内容 ...

  6. 网络编程-Python高级语法-装饰器

    理论:装饰器就是运行一个函数之前首先运行装饰器函数,python装饰器就是用于拓展原来函数功能的一种函数,这个函数的特殊之处在于它的返回值也是一个函数,使用python装饰器的好处就是在不用更改原函数 ...

  7. Windows的四类消息

    Windows的三类消息1.标准消息宏名称 对映消息 消息处理函数(名称已由系统预设)ON_WM_CHAR WM_CAHR OnCharON_WM_CLOSE WM_CLOSE OnCloseON_W ...

  8. 关于ajax 返回值验证问题

    如果后台返回布尔值true时 前端 if(data==true){    //true 不能加引号  否则就变成了字符串了 alert(data+'操作成功!'+status); }

  9. angularjs 初始化方法执行两次以及url定义错误导致传值错误问题

    1.初始化方法执行两次以上的问题定义一个 route.如下所示:.state('main.channelQryDetail', { url:'/channelDetail/:channelNo/:pa ...

  10. 图片编辑工具GIMP

    今天修改图片: 给图片添加alpha通道,选中要删去的部分,就会变成透明,要保存为png格式 文库参考: http://wenku.baidu.com/link?url=HR1lKoBKS1xbhUJ ...