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. 【SQL】 MySql与SqlServer差异比较(MySql踩坑全集)

    本文主要记录将数据库从SqlServer移植到MySql的过程中,发现的各种坑爹问题.以SqlServer为主,记录MySql的差异性. 一.IF语句 首先MySql中的的IF语法不同. IF Con ...

  2. C++运算符重载——输入/输出运算符

    为了与IO标准库一致,重载输入输出运算符函数的第一个行参应该是流的引用,第二个行参是对象的引用. 如果重载为类的成员函数,第一个行参应该是对象的引用,第二个行参是流的引用. 使用方式是 ClassOb ...

  3. 咸鱼入门到放弃7--jsp<二>jsp常用标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  4. mysql 正则表达式问号

    MySQL 中,用正则表达式匹配?,需要使用两个转义字符   \\? 因使用一个被坑了很久.

  5. Django聚合分组查询、常用字段

    首先回顾sql中聚合和分组的概念: 如果没有分组,会把整张表作为一个大组,查询字段必须是聚合结果:如果有分组,分组之后,必须要使用聚合的结果作为having的条件. 聚合查询 聚合:aggregate ...

  6. Ackerman

    Ackerman 递归算法 一 . 问题描述及分析 图1 二 . 代码实现 package other; import java.io.BufferedWriter; import java.io.F ...

  7. 入门级----黑盒测试、白盒测试、手工测试、自动化测试、探索性测试、单元测试、性能测试、数据库性能、压力测试、安全性测试、SQL注入、缓冲区溢出、环境测试

    黑盒测试 黑盒测试把产品软件当成是一个黑箱子,只有出口和入口,测试过程中只要知道往黑盒中输入什么东西,知道黑盒会出来什么结果就可以了,不需要了解黑箱子里面是如果做的. 即测试人员不用费神去理解软件里面 ...

  8. VS2013使用滚动条缩略图、双击选中高亮、配色方案、代码竖虚线(缩进标尺)

    1.双击代码或选中代码高亮,用以下插件,反应很灵敏,我安装的是第三个 2.代码编辑器的滚动条缩略图是VS自带的,需要打开菜单----工具----选项,如下图设置: 3.VS默认的选中颜色,需要打开菜单 ...

  9. js实现数组去重的几种方法

    1.简单结构的数组,例如[1,2,3,3,4],使用es6提供的Set和Array.from Set:是一种新的数据结构,可以接收一个数组或者是类数组对象,自动去重其中的重复项目. 类数组对象:只包含 ...

  10. python学习-01

    1.编程语言分类: 编译型:(由编译器将代码编译成计算机识别的二进制文件)C \C++ \C#    运行速度较解释型语言快 解释型:(在运行时进行编译)python.php.sheel.ruby.j ...