AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

时间 2019-11-08

标签 ajax 违反同源策略就是 jsonp cors 栏目 Ajax 繁體版

原文原文链接

https 协议默认端口号 443javascript

http 协议默认端口号 80css

同源策略html

由网景公司提出的——浏览器的前端

为了浏览器安全而生java

同源策略：协议、域名、端口号必须彻底一致node

违背同源策略，就是跨域jquery

跨域问题只存在于 AJAX 中____浏览器的 AJAX 引擎检测出来的问题____绕开这个引擎ajax

因为跨域，直接致使没法获取响应数据express

1. jsonp 的跨域请求解决方案json

因为普通标签没有跨域问题，因此利用 <script > 标签来发送跨域请求

利用 <script> 标签可以跨域，且请求到资源后直接执行

优点：

只能发 get 请求

兼容性很好

1. 建立 script 标签

let script = document.createELement("script");

2. 设置响应成功的全局回调函数

window.getData = function(server_info){

console.log(server_info); // 直接打印接收到的响应数据

};

3. 设置 script 的 src 属性

script.src = 'http://localhost:3000/jsonp?callback=getData';

4. 将 script 添加到页面中生效

document.body.appendChild(script);

5. 服务器端 ajax.js

app.get('', ()=>{

const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据

response.send(`${callback}(${JSON.stringify(data)})`);

// getData(name: 'postResponse', age: 18) // 被浏览器请求过去，而后执行了。简介获取了响应数据

// 必需要将对象转化为 JSON 数据，而后被浏览器解析成字符串。不然报错

});

实例源代码

node 服务器 index.js

const express = require('express'); const app = express(); app.use(express.static('public')); app.use(express.urlencoded({extended: true})); // 原生 ajax 的 get 路由 app.get("/jsonp", (request, response)=>{ //获取请求参数 const {callback} = request.query; const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据  response.send(`${callback}(${JSON.stringify(data)})`); // getData(name: 'postResponse', age: 18) // 被 浏览器 请求过去，而后执行了。间接获取了响应数据 // 必需要 将 对象转化为 JSON 字符串数据，而后被浏览器 解析成 JSON 对象。不然报错 }); /**************** 端口号 3000, 启动服务器 ***************/ app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/jsonp.html\n\t\tHunting Happy!'));

浏览器前端

public/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <button id="btn">点击发送jsonp的跨域请求</button>
        <script type="text/javascript"> document.getElementById('btn').onclick = function () { /* jsonp： 工做原理: 利用script标签可以跨域的特性解决跨域的 特色： 1. 只能发送get请求 2. 兼容性好 */
                // 1. 建立script标签
 let script = document.createElement('script'); // 2. 设置响应成功的全局回调函数
 window.getData = function (data) { console.log(data); }; // 3. 设置script的src属性
 script.src = 'http://localhost:3000/jsonp?callback=getData'; // 4. 将script添加到页面中生效
 document.body.appendChild(script); } </script>
    </body>
</html>

2. cors 官方解决方案

官方提供的跨域问题解决方案

前端没必要作任何事，在服务器端设置一个响应头便可

注意：

支持全部请求方式

兼容性差，

access-control-allow-origin

app.get('/cors', (request, response)=>{

response.set('access-control-allow-origin', '*'); // 容许全部请求地址跨域

response.send({"name":'corsResponse', age: 22});

});

实例源代码

node 服务器 index.js

const express = require('express'); const app = express(); app.use(express.static('public')); app.use(express.urlencoded({extended: true})); // 原生 ajax 的 get 路由
app.get('/cors', (req, res) => { /* cors 是官方提供的解决跨域问题的一种方案 特色： 1. 全部请求方式都支持 2. 兼容性较差 使用： 设置一个响应头 access-control-allow-origin */
    // res.set('access-control-allow-origin', '*'); //容许全部请求地址跨域
    res.set('access-control-allow-origin', 'http://localhost:3000/cors');  //容许当前请求地址跨域
 res.send({name: 'jack', age: 18}); })； /**************** 端口号 3000, 启动服务器 ***************/ app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/cors.html\n\t\tHunting Happy!'));

浏览器前端代码 index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>官方 cors 解决跨域问题</title>
    </head>
    <body>
        <button id="btn">点击按钮发送ajax请求</button>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript"> $('#btn').click(function () { $.get('http://localhost:3000/cors', function(server_info){//成功的回调函数
 console.log(server_info); }) }) </script>
    </body>
</html>