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>