jsonp和cors实现跨域技术指南

jsonp实现的原理主要是利用src属性可以去加载跨域的资源，例如script、img。动态的创建script标签，加载跨域资源

下面看一个简单的例子：前端：（本页面的端口号为63342）

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>  </body> <script src="http://localhost:8080/js/index.js"></script>//去加载跨域资源 </html>

跨域资源站点后端（我这里使用nodejs写的，很简单的一个server）：

const express=require('express'); const fs=require('fs'); const expressStatic=require('express-static') var server=express(); server.get('/js/index.js',function (req,res) {    fs.readFile('./js/index.js',function (err,data) {        if(err){            res.send('数据读取失败')        }else {            res.send(data);        }        res.end();    }) }) server.listen(8080);

那么我们可以在前端页面看到结果，如图输入图片说明

二、用xhr去请求数据会怎么样呢：前端：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <span>名字:</span><span class="name"></span><br/> <span>年龄:</span><span clase="age"></span> </body> <script >     function XHR() {         var xhr;         try {             xhr = new XMLHttpRequest();         }         catch (e) {             var IEXHRVers = ["Msxml3.XMLHTTP", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];             for (var i = 0, len = IEXHRVers.length; i < len; i++) {                 try {                     xhr = new ActiveXObject(IEXHRVers[i]);                 }                 catch (e) {                     continue;                 }             }         }         return xhr;     }     var xhr = XHR();     xhr.open('GET', 'http://localhost:8080/json/test.json', true);     xhr.onreadystatechange = function () {         //xhr.onload=         if (xhr.readyState == 4) {             if (xhr.status == 200) {                 var da = xhr.responseText;                 eval("var json=" + da);                console.log(json);             } else {                 console.log("数据请求出错");             }         }     }     // xhr.onerror=function () {     //     console.log('数据请求出错')     // }     xhr.send(null) </script> </html>

后端：

const express=require('express'); const fs=require('fs'); // const expressStatic=require('express-static'); var server=express(); server.get('/json/test.json',function (req,res) {     var obj=req.query;         fs.readFile('./json/test.json',function (err,data) {             if(err){                 res.send('数据读取失败')             }else {                 res.send(data);             }             res.end();         }) }) // server.use(expressStatic('./')) server.listen(8080); console.log('启动成功')

结果：跨域了无法请求到数据

输入图片说明

三、相对jsonp只能请求get数据，cors跨域资源共享实现跨域请求资源更好只需要后端实现cors接口就好，改变http响应头。

const express=require('express'); const fs=require('fs'); // const expressStatic=require('express-static'); var server=express(); server.get('/json/test.json',function (req,res) {     var obj=req.query;     res.header("Access-Control-Allow-Origin", "*");//所有站点都可以访问该资源     res.header("Access-Control-Allow-Headers", "X-Requested-With");     res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");     res.header("X-Powered-By",' 3.2.1')     res.header("Content-Type", "application/json;charset=utf-8");         fs.readFile('./json/test.json',function (err,data) {             if(err){                 res.send('数据读取失败')             }else {                 res.send(data);             }             res.end();         }) }) // server.use(expressStatic('./')) server.listen(8080); console.log('启动成功')

本文发表于2018年03月17日 22:38
(c)注：本文转载自https://my.oschina.net/u/3407699/blog/1637825，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.

阅读 1510 讨论 0 喜欢 0

快捷链接
网站地图
提交友链

jsonp和cors实现跨域

Y2lvbkBjaGluYWNpb24uY24=