跨域方法实践(jsonp,cors)

最新推荐文章于 2022-01-07 09:38:55 发布

lllanlll

最新推荐文章于 2022-01-07 09:38:55 发布

阅读量184

点赞数

分类专栏： JavaScript 文章标签： node.js javascript

本文链接：https://blog.csdn.net/qq_24270109/article/details/104877703

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

同源策略：同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式，这是一个用于隔离潜在恶意文件的重要安全机制。如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。

1.CORS

1.起本地node服务

var http = require('http');

http.createServer(function (request, response) {

    response.writeHead(200, {
      'Content-Type': 'text/plain',
    });

    response.end('request arrive');
}).listen(516);

console.log('Server running at http://127.0.0.1:516/');
// node xxx.js

2.打开一个安全性较低的网站直接在console中输入：

let url = 'http://127.0.0.1:516/';
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();

在这里插入图片描述
报CORS跨域问题

在node代码中加入

'Access-Control-Allow-Origin': '*'

再次发送请求

在这里插入图片描述

已有响应

3.若是发送为put请求

在这里插入图片描述

在node代码中加入

'Access-Control-Allow-Methods': 'GET, POST, PUT'

在这里插入图片描述

cors总结

cors（跨域资源共享 Cross-origin resource sharing），它允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服跨域问题，它需要浏览器和服务器的同时支持。

浏览器端会自动向请求头添加origin字段，表明当前请求来源。
浏览器端需要设置响应头的Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Allow-Origin等字段，指定允许的方法，头部，源等信息。
请求分为简单请求和非简单请求，非简单请求会先进行一次OPTION方法进行预检，看是否允许当前跨域请求。

2.jsonp

1.重置node服务去掉

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT'

2.打开之前console输入

let scriptTest = document.createElement('script');
scriptTest.type = 'text/javascript';
scriptTest.src = `http://127.0.0.1:516/`;
document.head.appendChild(scriptTest);

在这里插入图片描述
但是我们现在只是成功发送了一个跨域请求，但是我们不像XMLHttpRequest那样可以在res.responseText中拿到数据，通过jsonp我们该怎么拿到请求的数据呢？方法就是前后端约定一个callback，来传递函数名，前端通过该函数来拿到数据。前端代码修改为：

let scriptTest = document.createElement('script');
scriptTest.type = 'text/javascript';
script.src = `http://127.0.0.1:516/?callback=dataBack`;
document.head.appendChild(scriptTest);
function dataBack (res) {
  console.log(JSON.stringify(res));
  // 请求完后删除添加到页面上的script标签
  var head = document.head
  head.removeChild(script)
}

node代码更改:

var http = require('http')
var urlTool = require('url')
// json 数据
var data = {'methods': 'jsonp', 'result': 'success'};

http.createServer(function (request, response) {
    var params = urlTool.parse(request.url, true)
    console.log(params)
    response.writeHead(200, {
      'Content-Type': 'text/plain'
    });
    if (params.query && params.query.callback) {

      // callback(data)
      var str = `${params.query.callback}(${JSON.stringify(data)})`
    }

    response.end(str);
}).listen(516);

console.log('Server running at http://127.0.0.1:516/');