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. spring-boot-starter-thymeleaf 避坑指南

    第一步:pom配置环境 先不要管包是做什么的 总之必须要有 否则进坑 <!--避坑包--> <dependency> <groupId>net.sourceforg ...

  2. 小程序 -- ui布局

    Flex布局 相对定位和绝对定位 弹性盒模型 display flex-direction flex-wrap  :nowrap(不换行)/ wrap(换行,第一行在上方)/ wrap-reverse ...

  3. python设计模式---结构型之门面模式

    门面,系统,客户端~ from django.test import TestCase class Hotelier: def __init__(self): print('Arranging the ...

  4. python之re正则简单够用

    0. 1.参考 Python正则表达式指南 https://docs.python.org/2/library/re.html https://docs.python.org/2/howto/rege ...

  5. 【Android】PreferenceActivity 详解

    PreferenceActivity是专业的设置界面,只要给它指定一个配置好的xml,它就能自动根据操作更改程序Preference的相应值. 首先要用一个xml文件来配置一个设置界面,也就是我们说的 ...

  6. UOJ#110. 【APIO2015】Bali Sculptures 贪心 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ110.html 题解 我们发现n=2000 的子任务保证A=1! 分两种情况讨论: $n\leq 100$ ...

  7. 02-Python入门学习-变量

    一.编程语言介绍1.机器语言:直接用二进制编程,直接控制硬件,需要掌握硬件的操作细节优点:执行效率高缺点:开发效率低 2.汇编语言:用英文标签取代二进制指令去编写程序,直接控制硬件,需要掌握硬件的操作 ...

  8. Egret的Shape

    class ShapeTest extends egret.DisplayObjectContainer { public constructor() { super(); this.addEvent ...

  9. css margin使用技巧

    margin使用技巧: (1)设置元素水平居中:margin:x auto; (2)margin负值让元素位移及边框合并 水平居中:auto 代码: <!DOCTYPE html> < ...

  10. 在Windows上安装Nexus 3.2.0-01

      在Windows上安装Nexus 环境: Windows 7 apache-maven-3.3.9 JDK 1.8 下载Nexus: https://sonatype-download.globa ...