ajax跨域问题

最新推荐文章于 2022-12-02 10:48:13 发布

@半笺寄幽怀

最新推荐文章于 2022-12-02 10:48:13 发布

阅读量119

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45848432/article/details/120929714

版权

使用ajax的过程中，经常会碰见跨域。什么是跨域呢？就是在协议、域名、端口号不相同的情况下进行数据交互，这就是交互。这是违背了浏览器的自律行为。那么要怎么解决这个问题呢？

1、jsonp方法

有些标签是自带跨域属性的，比如script标签，使用这些标签的特性来实现跨域。

话不多说，我们来看看是怎么实现的。首先我们要在8000端口起一个服务，用于接收请求，利用node.js在终端将服务启动。

// 引入express模块
const express = require('express');
const app = express();

// 接收get请求
app.get('/jsonp-server', (request, response) => {
    // 定于一个传输数据
    const data = {
        name: '张三',
        age: 20,
        address: '江西省南昌市'
    }
    // 将数据转换成json格式传输
    response.send(`func(${JSON.stringify(data)})`);
})

// 监听
app.listen('8000', () => {
    console.log('8000端口已开启...');
})

然后写HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonp解决跨域问题</title>
    <style>
        .box {
            width: 200px;
            height: 150px;
            border: 1px solid seagreen;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div class="box"></div>
</body>
<script type="text/javascript">
    // 首先获取元素
    const btn = document.querySelector('button');
    const box = document.querySelector('.box');

    // 绑定事件
    btn.addEventListener('click', function() {
        // 创建script节点
        const script = document.createElement('script');
        // 给script添加请求链接
        script.src = "http://127.0.0.1:8000/jsonp-server";
        // 将script添加到body下
        document.body.appendChild(script);
    })

    function func(data) {
        console.log(data);
        box.innerHTML = `姓名:${data.name}年龄:${data.age}住址:${data.address}`;
    }
</script>
</html>

我们来看看效果

这里我们是5500端口向8000端口发送请求，这就是一个跨域请求。

来讲一下实现原理，在HTML发送请求，服务端返回一个函数调用，并且携带数据，就实现了跨域请求。我们可以在控制台中来查看服务端给我们返回的是什么数据。下面我们讲讲cors是怎么实现跨域的。

2、cors方法

这个方法是官方推荐的跨域方法，我们来看看。首先，是在服务端写一个请求，同上。然后同样布局一个html.

// 引入express模块
const express = require('express');
const app = express();

// 接收get请求
app.get('/cors-server', (request, response) => {
    // 定于一个传输数据
    const data = {
        name: '张三',
        age: 20,
        address: '江西省南昌市'
    }
    // 将数据转换成json格式传输
    response.send(JSON.stringify(data));
})



// 监听
app.listen('8000', () => {
    console.log('8000端口已开启...');
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cors解决跨域问题</title>
    <style>
        .box {
            width: 200px;
            height: 150px;
            border: 1px solid seagreen;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div class="box"></div>
</body>
<script type="text/javascript">
    // 首先获取元素
    const btn = document.querySelector('button');
    const box = document.querySelector('.box');

    // 绑定事件
    btn.addEventListener('click', function() {
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 初始化
        xhr.open('GET','http://127.0.0.1:8000/cors-server');
        // 发送
        xhr.send();
        // 返回的数据是json类型,则转换
        xhr.responseType = 'json';
        // 绑定事件
        xhr.onreadystatechange = function() {
            // 判断请求是否发送成功
            if(xhr.readyState === 4) {
                if(xhr.status >= 200 && xhr.status < 300) {
                    // 成功返回数据
                    console.log(xhr.response);
                    box.innerHTML = `姓名:${xhr.response.name}年龄:${xhr.response.age}住址:${xhr.response.address}`;
                }
            }
        }
    })
</script>
</html>

这样发送请求会提示我们，意思是：访问位于“”的XMLHttpRequesthttp://127.0.0.1:8000/cors-服务器“来自源”http://127.0.0.1:5500'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。

那么我们只需要在服务端的请求体内加入，即可实现cors跨域

response.setHeader('Access-Control-Allow-Origin', '*');

@半笺寄幽怀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax跨域问题

使用ajax的过程中，经常会碰见跨域。什么是跨域呢？就是在协议、域名、端口号不相同的情况下进行数据交互，这就是交互。这是违背了浏览器的自律行为。那么要怎么解决这个问题呢？1、jsonp方法有些标签是自带跨域属性的，比如script标签，使用这些标签的特性来实现跨域。话不多说，我们来看看是怎么实现的。首先我们要在8000端口起一个服务，用于接收请求，利用node.js在终端将服务启动。// 引入express模块const express = require('express');con
复制链接

扫一扫