Ajax跨域--同源策略 & 什么是跨域

Posted 2021-08-28 Z && Y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax跨域--同源策略 & 什么是跨域相关的知识，希望对你有一定的参考价值。

1.同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同(说白了就是来自于同一个服务)。
违背同源策略就是跨域
ajax默认遵循同源策略

2. 同源策略演示

2.1 请求前的准备

2.1.1 html页面

ajaxDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
<h1>天天天</h1>
<button>点击获取用户数据</button>
</body>
<script></script>
</html>

2.1.2 服务端

server.js

const express = require('express');

const app = express();

app.get('/home', (request, response) => {
    //响应一个页面 __dirname当前文件夹的绝对路径
    response.sendFile(__dirname + '/ajaxDemo.html');
});

app.get('/data', (request, response) => {
    response.send('用户数据');
});

app.listen(9000, () => {
    console.log("服务已经启动......");
});

启动服务端:

输入： nodemon server.js

2.2 同源策略演示

ajaxDemo.html中script标签的代码

    const btn = document.querySelector('button');

    btn.onclick = function () {
        const x = new XMLHttpRequest();
        //这里因为是满足同源策略的, 所以 url 可以简写
        x.open("GET", '/data');
        //发送
        x.send();
        //
        x.onreadystatechange = function () {
            if (x.readyState === 4) {
                if (x.status >= 200 && x.status < 300) {
                    console.log(x.response);
                }
            }
        }
    }

结果:

以上是关于Ajax跨域--同源策略 & 什么是跨域的主要内容，如果未能解决你的问题，请参考以下文章