跨域及处理方案

初见766

于 2021-11-29 21:55:19 发布

阅读量161

点赞数

分类专栏： node.js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_60488295/article/details/121620727

版权

node.js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、跨域

1.1 简介

什么是跨域调用？【重点】

当前地址与要调用的目标地址中的协议、主机名、端口号有一个不一致就发生跨域调用，这是因为浏览器的同源策略限制所导致。

怎样解决跨域调用？【重点】

第一种：在服务端设置允许跨域调用的响应头信息：【重点】

    res.header('Access-Control-Allow-Origin', '*'); //开启允许跨域调用
    res.header('Access-Control-Allow-Methods', '*'); //所有请求方式都允许跨域调用

或者

使用第三方cors中间件来设置允许跨域调用

在项目根目录中安装cors: npm i cors


const cors = require('cors') //导入中间件
app.use(cors()); //使用第三方cors中间件设置允许跨域调用

第二种：使用JSONP来设置跨域调用【了解】

什么是JSONP?【重点】

JSONP不属于ajax技术，属于javascript技术，它是利用<img>标签、<script>标签等中的src属性可以跨域调用的特性来调用服务端的程序，并传入一个回调函数来获取服务端返回的数据。

JSONP的缺点：只能发送get方式的请求、不支持post请求

前端代码如下：

<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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
        // function fn(d) {
        //     console.log(d, 3333);
        // }

        var fn = function(data) {
            console.log(data, 1111);
        }
    </script>
    <script src="http://localhost:3000/my_jsonp?calls=fn"></script>
</head>

服务端代码如下：

const express = require('express');
const path = require('path');


const app = express();

app.listen(3000, () => {
    console.log('3000端口');
});

app.use(express.urlencoded({ extended: false }));
//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置
app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析



//测试JSONP：
app.get('/my_jsonp', (req, res) => {

    let calls = req.query.calls ? req.query.calls : '';
    // console.log(calls, 999);

    // res.send('jsonp技术');
    res.send(`${calls}('jsonp技术')`)
});

跨域种类

跨域错误

1.2 CORS解决跨域

1.2.1 配置cors

1.2.1.1 Access-Control-Allow-Origin

语法：

 res.header('Access-Control-Allow-Origin', '*');

描述：默认情况下只能用域发送ajax请求。此属性可以设置哪个来源（ url ）可以请求。常常设置为 *

1.2.1.2 Access-Control-Allow-Methods

语法：

res.header('Access-Control-Allow-Methods', '*');

描述：默认情况下，CORS 仅支持客户端发起 GET、POST 请求。如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法。

1.2.2 cors中间件

(1)运行 npm install cors 安装中间件

(2)使用 const cors = require('cors') 导入中间件

(3)在路由之前调用 app.use(cors()) 配置中间件

1.3 JSONP解决跨域

1.3.1 原理

1.3.2 特点/缺点

二、Promise与Ajax

2.1 使用promise封装ajax

2.2 使用封装好的方法发送ajax

初见766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域及处理方案

一、跨域1.1 简介什么是跨域调用？【重点】当前地址与要调用的目标地址中的协议、主机名、端口号有一个不一致就发生跨域调用，这是因为浏览器的同源策略限制所导致。怎样解决跨域调用？【重点】第一种：在服务端设置允许跨域调用的响应头信息：【重点】 res.header('Access-Control-Allow-Origin', '*'); //开启允许跨域调用 res.header('Access-Control-Allow-Methods', '*'); //所有请求方式...
复制链接

扫一扫