该问题的情景如下:

问题描述

Ajax的请求代码放在一台机器上,而服务器的java 路由程序放在另一个机子上,所以Ajax的url填写的是带“http://”  的地址,而不是相对地址

问题解决:

这时候,就出现了浏览器接收不到Json数据包的情况,
之后将前端代码和服务器代码部署在同一个服务器,就没问题了

问题原理:

问题

    在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin 的header,才能让前者成功拿到数据。
这句话对吗?如果对,那么流程是什么样的?

跨域

    怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。

参考:

当跨域访问时,浏览器会发请求吗

这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢?

我在jsbin上 做了一个试验 ,使用Chrome打开。当点击“Run with Js”时,控制台上会打出:

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access.

但开发者工具的”Network”栏并没有任何记录。它到底发请求了没?

我又使用 python -m SimpleHTTPServer 在本地创建了一个小服务器,然后把地址改成它,结果发现在python这边的确打印出请求来了,可见浏览器的确发出了请求

Access-Control-Allow-Origin

现在该 Access-Control-Allow-Origin 出场了。只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:

Access-Control-Allow-Origin: http://run.jsbin.io

如果它的值设为 * ,则表示谁都可以用:

Access-Control-Allow-Origin: *

没错,在产品环境中,没人会用 *

你可以阅读下面这篇文章了解更多,并可找到其中的”Run Sample”链接,实际体验一下:

http://www.html5rocks.com/en/tutorials/cors/


Ajax交互,浏览器接收不到服务器的Json数据(跨域问题)的更多相关文章

  1. ajax请求json数据跨域问题(转)

    一.后台代理技术 由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 具体操作如下: 1.在localhost:81/a.html中,向同源下的某个代理程序发出请求 $ ...

  2. Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  3. 【代码笔记】iOS-向服务器传JSON数据的两种方式

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  4. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  5. ASP.Net MVC 在ajax接收controller返回值为Json数据

    首先,再次回忆一下ajax的标准用法:(这张图写的比较详细了)(转) 页面部分ajax代码: $.ajax({            url: "/Home/Login?account=&q ...

  6. chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例

    http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com ...

  7. 解决Ajax请求后台Servlet接口拿不到JSON数据问题

    前端Ajax请求代码如下: window.onload=function() { var url='http://127.0.0.1:8080/testpj/ErrorlogServlet'; $.a ...

  8. 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri

    最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...

  9. element-ui + vue + node.js 与 服务器 Python 应用的跨域问题

    跨越问题解决的两种办法: 1. 在 config => index.js 中配置 proxyTable 代理: proxyTable: { '/charts': { target: 'http: ...

随机推荐

  1. 大数据系列-CDH环境中SOLR入数据

    1       创建集合 SSH远程连接到安装了SOLR的CDH节点. 运行solrctl  instancedir  --generate  /solr/test/GX_SH_TL_TGRYXX_2 ...

  2. C#自定义控件属性显示在属性面板中操作

    private Color controleColor; [Browsable(true)] [Description("控件颜色"), Category("自定义&qu ...

  3. 「zigbee - 1」工欲善其事必先利其器 - IAR for 8051 IDE customization

    最近在实验室做一些 Zigbee 相关的事情,然而一直没在博客上记录啥东西,也不像原来在公司有动力在 Confluence wiki 上扯东扯西.直到前些阵子,跑到 feibit 论坛上(国内较大的一 ...

  4. java 从args[]中赋值和程序直接赋值不一样?

    System.out.println("对应的中文: " + decodeUnicode(args[0])); 赋值args[0] = “\u7b80\u4ecb” System. ...

  5. poj1062 最短路

    题意:有n个物品,任务是得到1号物品,现在每个物品有它的主人,你可以用金钱购买物品,当然也可以用其他物品加上优惠的价格换取,但是有个要求,因为每个物品的主人有各自的等级,你所交易过的人中,等级差不能超 ...

  6. python批量GBK转UTF-8

    有时候编码问题在导入工程的时候很烦,所以还是让世界都是"UTF-8"吧. 抄来一段代码: #!/usr/env python # -*- coding: utf8 -*- impo ...

  7. 宏buf_pool_struct

    typedef struct buf_pool_struct buf_pool_t; /** @brief The buffer pool structure. NOTE! The definitio ...

  8. Java知识点:琐碎知识点(2)

    49个关键字一览 abstract default if private this boolean do implements protected throw break double import ...

  9. poj 2446 二分图最大匹配

    思路:由(i+j)为偶数的点向(i+j)为奇数的点建边.求一次最大匹配,若正好为空格数(不包含洞)的一半,即输出YES. #include<iostream> #include<cs ...

  10. 迷宫城堡--HDOJ 1269

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...