处理跨域的主要方法

  1. JSONP
  2. CORS

    本文主要讨论CORS解决Ajax因为浏览器同源策略不能跨域请求数据的问题。

1. JSONP

JSONP跨域可以参考下面这篇博客

JSONP跨域

2. CORS

关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解。

跨域资源共享 CORS

  1. 跨域资源共享CORS(Cross-origin resource sharing)

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而解决了AJAX不能跨域请求的问题。

  1. CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的Ajax通信没有差别，代码完全一样。浏览器一旦发现Ajax请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制。

Ajax简介

Ajax即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）

Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，当然整个过程中，浏览器页面不会被刷新。

注意，Ajax 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。

创建Ajax步骤：

1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

兼容各个浏览器的创建方法

function createRequest (){

    try {

        xhr = new XMLHttpRequest();

    }catch (tryMS){

        try {

            xhr = new ActiveXObject("Msxm12.XMLHTTP");

        } catch (otherMS) {

            try {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }catch (failed) {

                xhr = null;

            }

        }

    }

    return xhr;

}

2.准备请求

xhr.open(method,url,async);

  • open() 的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。
  • 第二个参数是要作为请求发送目标的URL。
  • 第三个参数是true或false，表示请求是异步还是同步。true是异步，默认true。

3.发送请求

xhr.send();

send() 方法的参数可以是任何你想发送给服务器的内容

4.处理响应

xhr.onreadystatechange = function(){

    if(xhr.readyState == 4 && xhr.status == 200){

        console.log(xhr.responseText);

    }

}
  1. onreadystatechange ：当处理过程发生变化的时候执行下面的函数
  2. readyState状态值
  • 0：请求未初始化。
  • 1：正在加载) or (已建立服务器链接)
  • 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
  • 3：请求在处理中；
  • 4：响应已完成。

  1. responseText：服务器以文本字符的形式返回

  2. responseXML：获得 XML形式的响应数据

  3. 对象转换为JSON格式使用JSON.stringify

  4. json转换为对象格式用JSON.parse()

  5. 返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象

代码实现如下：

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <button id="myButton">点我</button>

    <script src="./main.js"></script>

</body>

</html>

JS

myButton=document.getElementById('myButton')

myButton.addEventListener('click',(e)=>{

    let xhr=new XMLHttpRequest()

    xhr.onreadystatechange=()=>{

       if( xhr.readyState===4){

           console.log("请求响应都完毕了")

           if( xhr.status>=200&& xhr.status<300){

               console.log("请求成功")

               console.log(typeof  xhr.responseText)//判断返回数据的类型是String

               console.log( xhr.responseText)

               let string= xhr.responseText

               let object=window.JSON.parse(string)

               console.log(typeof object)

               console.log(object)

           }else if( xhr.status>=400){

               console.log("请求失败")

           }

       }

    }

    xhr.open('GET','/xxx')

    xhr.send()

})


 if(path==='/xxx'){

    response.statusCode=200

    response.setHeader('Content-Type', 'text/json;charset=utf-8')

    response.write(`

    {

      "note":{

        "to":"xxx",

        "from":"yyy",

        "content":"hello"

      }

    }

    `)

    response.end()

  }

当发送请求的时候，就会根据xml.open('GET','/xxx')找到对应的请求路径。在本文是找到/xxx路径，然后返回所请求的数据，在浏览器运行结果如下。

CORS跨域

关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解。

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <button id="myButton">点我</button>

     <script src="./main.js"></script>

</body>

</html>

JS

myButton.addEventListener('click',(e)=>{

    let xhr=new XMLHttpRequest()

    xhr.open('GET','http://jack.com:8002/xxx')

    xhr.onreadystatechange=()=>{

       if(xhr.readyState===4){

           console.log("请求响应都完毕了")

           if(xhr.status>=200&&xhr.status<300){

               console.log("请求成功")

               console.log(typeof xhr.responseText)

               console.log(xhr.responseText)

               let string=xhr.responseText

               let object=window.JSON.parse(string)

               console.log(typeof object)

               console.log(object)

           }else if(xhr.status>=400){

               console.log("请求失败")

           }

       }

    }

    xhr.send()

})


if(path==='/xxx'){

    response.statusCode=200

    response.setHeader('Content-Type', 'text/json;charset=utf-8')

    response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')

    response.write(`

    {

      "note":{

        "to":"xxx",

        "from":"yyy",

        "content":"hello"

      }

    }

    `)

    response.end()

  }

可以看到当代码没有下面这一行代码时Ajax并不能跨域请求 response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')的时候，结果如下

从结果可以看出，因为浏览器的同源策略，Ajax不能跨域请求

解决的办法是添加 response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')

Ajax与CORS通信的更多相关文章

  1. Django 之Ajax&Json&CORS&同源策略&Jsonp用法

    什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...

  2. 使用ajax与服务器通信的步骤

    使用ajax与服务器通信的步骤: 1. 创建一个XMLHttpRequest对象 2. 创建url,data,通过xmlHttpRequest.send() 3. 服务器端接收ajxa的请求,做相应处 ...

  3. 使用Ajax与服务器端通信

    Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中 ...

  4. Ajax跨域通信方法

    1.Jsonp.document.domain+iframe.window.name.window.postMessage.服务器上设置代理页面. 2.Jsonp(json with padding) ...

  5. 解决ajax请求cors跨域问题

    ”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ** ...

  6. 嵌入式开发——boa服务器下的ajax与cgi通信

    博主最近在最有做一个嵌入式课程设计,要求是利用基于cortax a8的物联网实验箱做一个简单的嵌入式网页交互系统作为课程设计来验收评分.因为本身自己是学前端的,所以网页部分并不是重点,主要是和boa服 ...

  7. 黄聪：利用iframe实现ajax 跨域通信的解决方案（转）

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  8. .net MVC下跨域Ajax请求(CORS)

    二.CROS (Cross-origin Resource Sharing) CROS相当于一种协议,由浏览器.服务端共同完成安全验证,进行安全的跨域资源共享.对于开发人员来说就跟在本站AJAX请求一 ...

  9. CORS通信

    CORS 是一个 W3C 标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨域的服务器,发出XMLHttpRequest请 ...

随机推荐

  1. 红米Note5进入全网通5.0时代，其实是高通已经落后了！

    高通早在去年12月份就正式发布了新一代的骁龙845处理器,接下来就是人们对于搭载骁龙845处理器的手机充满期待,可是转眼到了2018年的3月份,目前已经发布的高端旗舰新机却只有三星S9和三星S9+,而 ...

  2. Keil开发环境如何生成BIN文件

    为什么需要BIN文件呢? 有些烧录器只支持BIN文件. 进行OTA远程升级时,只能使用BIN文件. 使用JLink脚本文件进行一键烧录时,只支持BIN文件. BIN文件要比HEX和AXF文件小的多. ...

  3. vscode快捷键大全

    一般Ctrl + Shift + P,F1显示命令调色板 Ctrl + P快速打开,转到文件...Ctrl + Shift + N新窗口/实例 Ctrl + Shift + W关闭窗口/实例 Ctrl ...

  4. .net core 监听性能，异常

    https://www.cnblogs.com/laozhang-is-phi/p/10287023.html#autoid-2-2-0

  5. Vue diff 算法

    一.虚拟 DOM (virtual dom) diff 算法首先要明确一个概念就是 diff 的对象是虚拟DOM(virtual dom),更新真实 DOM 是 diff 算法的结果. 注:virtu ...

  6. Ordering Tasks

    链接 [https://vjudge.net/contest/281085#problem/D] 题意 有n个任务,有M个对先后顺序 然你输出最后的完成任务的顺序,有多种可能输出一种即可 分析 裸的拓 ...

  7. StanfordPOSTagger的用法

    或者: 然后, 由说明文档可知,nltk.tag.stanford module是与斯坦福标识符交互的模块.要到https://nlp.stanford.edu/software下载Tagger mo ...

  8. JQuery 的Ajax的使用

    JSON:一种轻量级的数据表示方法,优点:传输方便,占用字节少 XML:一种偏重量级的数据表示方法,优点:格式清晰,占用字节多,大量的字节都浪费在了标签上: 网络传输我们常使用json,因为浏览器解析 ...

  9. ElasticSearch Nosql

    把 ElasticSearch 当成是 NoSQL 数据库 Elasticsearch 可以被当成一个 "NoSQL"-数据库来使用么? NoSQL 意味着在不同的环境下存在不同的 ...

  10. Java Core - JVM运行时内存管理

    在读正文之前,阅读以下两篇博客学习并理解堆栈.作用域.本地方法的概念. 作用域:https://www.cnblogs.com/AlanLee/p/6627949.html 操作数栈:https:// ...