Express框架开发接口之跨域cors

news2024/11/27 5:31:46

1.跨域是什么?

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

同源策略限制了一下行为:

  • Cookie无法读取
  • DOM 和 JS 对象无法获取
  • Ajax请求发送不出去

同源是指,域名、协议、端口均为相同

为什么需要用到跨域?

1、自身业务是出现很多端(前后端分离开发) 2、和第三方合作 3、面试经常问

如何处理跨域带来的ajax问题?(解决跨域方案)

解决接口跨域问题的方案主要有两种:

① CORS(主流的解决方案,推荐使用)

② JSONP(有缺陷的解决方案:只支持 GET 请求)

2.什么是 CORS

CORS (Cross-Origin Resource Sharing,跨域资源共享)由一系列 HTTP 响应头组成,这些 HTTP 响应头决定 浏览器是否阻止前端 JS 代码跨域获取资源。 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头, 就可以解除浏览器端的跨域访问限制。

 

 

使用步骤

使用步骤分为如下 3 步:

① 运行 npm install cors 安装中间件

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

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

CORS 的注意事

① CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口。

② CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器,才能正常访问开启了 CORS 的服 务端接口(例如:IE10+、Chrome4+、FireFox3.5+)。

响应头部

CORS 响应头部 - Access-Control-Allow-Origin

如果指定了 Access-Control-Allow-Origin 字段的值为通配符 *,表示允许来自任何域的请求

CORS 响应头部 - Access-Control-Allow-Headers

默认情况下,CORS 仅支持客户端向服务器发送如下的 9 个请求头: Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、 Content-Type (值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一) 如果客户端向服务器发送了额外的请求头信息,则需要在服务器端,通过 Access-Control-Allow-Headers 对额外 的请求头进行声明,否则这次请求会失败!

CORS 响应头部 - Access-Control-Allow-Methods

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

//处理跨域请求
app.all('*', function (req, res, next) {
    //允许的来源
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', 'Content-type');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");

    next();
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1160699.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据可视化篇——pyecharts模块

在之前的文章中我们已经介绍过爬虫采集到的数据用途之一就是用作可视化报表,而pyecharts作为Python中可视化工具的一大神器必然就受到广大程序员的喜爱。 一、什么是Echarts? ECharts 官方网站 : https://echarts.apache.org/zh/index.html ECharts 是…

Golang Gin 接口返回 Excel 文件

文章目录 1.Web 页面导出数据到文件由后台实现还是前端实现?2.Golang Excel 库选型3.后台实现示例4.xlsx 库的问题5.小结参考文献 1.Web 页面导出数据到文件由后台实现还是前端实现? Web 页面导出表数据到 Excel(或其他格式)可以…

ROS安装

目录 1.配置ubuntu的软件和更新2.设置安装源3.设置 key4.更新 apt5.安装6.配置环境变量7.安装构建依赖8.初始化rosdep9.启动ROS10.启动小海龟验证 1.配置ubuntu的软件和更新 打开“软件和更新”对话 框,打开后按照下图进行配置(确保勾选了"restric…

J2EE项目部署与发布(Linux版本)->jdktomcat安装,MySQL安装,后端接口部署,linux单体项目前端部署

jdk&tomcat安装MySQL安装后端接口部署linux单体项目前端部署 1.jdk&tomcat安装 上传jdk、tomcat安装包 解压两个工具包 #解压tomcat tar -zxvf apache-tomcat-8.5.20.tar.gz #解压jdk tar -zxvf jdk-8u151-linux-x64.tar.gz 配置并且测试jdk安装 #配置环境变量 vim /e…

SSL数字证书服务

SSL/TLS 证书允许Web浏览器使用安全套接字层/传输层安全 (SSL/TLS) 协议识别并建立与网站的加密网络连接。 SSL数字证书主要功能 SSL证书在浏览器或用户计算机与服务器或网站之间建立加密连接。这种连接可以保护传输中的敏感数据免遭非授权方的拦截,从而使在线交易…

css中flexbox和grid的区别

css中flexbox和grid的区别 我们是不是被那些不会按预期排列的元素所影响?这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异,我们会发现这些布局是如何改变我们网站的风格。 理解CSS布局 css布局是网页设计的一个重要方面&…

Linux 命令速查

Network ping ping -c 3 -i 0.01 127.0.0.1 # -c 指定次数 # -i 指定时间间隔 日志 一般存放位置: /var/log,包含:系统连接日志 进程统计 错误日志 常见日志文件说明 日志功能access-logweb服务访问日志acct/pacct用户命令btmp记录失…

【K_means】在矢量量化图像压缩中的应用

我们我们先来导入相应的模块,并看看要压缩的图片: import numpy as np import matplotlib.pyplot as plt from sklearn.cluster import KMeans from sklearn.metrics import pairwise_distances_argmin#对两个序列中的点进行距离匹配的函数 from sklear…

AD9371 官方例程裸机SW概述(一)

AD9371 系列快速入口 AD9371ZCU102 移植到 ZCU106 : AD9371 官方例程构建及单音信号收发 ad9371_tx_jesd -->util_ad9371_xcvr接口映射: AD9371 官方例程之 tx_jesd 与 xcvr接口映射 AD9371 官方例程 时钟间的关系与生成 : AD9371 官方…

windows系统卸载mysql

1. win r 输入 control 打开控制面板 2.搜索mysql,删除搜索内容 3.删除相应路径下的mysql文件夹C:\Program Files C:\ProgramData 4.删除注册表,win r 输入 regedit 打开注册表 5.搜索MySql 删除掉 完成

Spring Cloud的ElasticSearch的进阶学习

目录 数据聚合 Bucket示例 Metric示例 RestAPI实现聚合 自动补全 使用拼音分词 自定义分词器 实现自动补全 RestAPI实现自动补全功能 数据同步 同步调用 异步通知 监听binlog 数据聚合 聚合可以实现对文档数据的统计、分析、运算。聚合常见的有三类: …

UI动效的都可以用哪些工作来制作

随着UI设计的不断发展,UI动效越来越多地应用于现实生活中。手机,iPad、计算机、网页和其他设备被广泛使用,所以问题来了,为什么UI动态效果越来越被广泛使用?它的优点是什么?哪些软件可以设计UI动态效果&…

【uniapp】html和css-20231031

我想用控件和样式来表达应该会更贴切,html和css的基础需要看看。 关于html:https://www.w3school.com.cn/html/html_layout.asp 关于css:https://www.w3school.com.cn/css/index.asp html让我们实现自己想要的布局(按钮&#xff0…

ERP源码_含vs2019版

ERP源码_含vs2019版 1、两套大型源码。 2、vs2010和vs2019。 3、sqlserver2008以上。 4、C#. 5、附带数据库,详细安装说明。 6、赠送dxdev控件。 注意, 1,2019是更新版。2010是老版本。 2,关闭桌面所有程序,安装dx控件&#xff0…

电子器件 MOS管的参数、选型与使用技巧

一、电路符号 MOS管分为 G(栅极)、S(源极)、D(漏极) 三极,在图中 S 极有两条线,D 极只有一条线。 1.1 NMOS 和 PMOS 下图中,左侧是 PMOS,右侧是 NMOS。箭头…

Flutter 02 基础组件 Container、Text、Image、Icon、ListView

一、Container容器组件: demo1: import package:flutter/material.dart;void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),)); }// 容器组件 class MyApp extends St…

【软件安装环境配置】VScode 设置运行前清屏

在运行插件中设置 运行插件的安装参考:【软件安装&环境配置】VsCode安装和配置各种环境(保姆级)-CSDN博客 找到Code-runner: Clear Previous Output,把√打上即可 本文所涉及的他人内容包括但不限于文字、图片、音频、视频等…

OpenCV官方教程中文版 —— 图像去噪

OpenCV官方教程中文版 —— 图像去噪 前言一、原理二、OpenCV 中的图像去噪1.cv2.fastNlMeansDenoisingColored()2.cv2.fastNlMeansDenoisingMulti() 前言 目标 • 学习使用非局部平均值去噪算法去除图像中的噪音 • 学习函数 cv2.fastNlMeansDenoising(),cv2.fa…

面试算法49:从根节点到叶节点的路径数字之和

题目 在一棵二叉树中所有节点都在0~9的范围之内,从根节点到叶节点的路径表示一个数字。求二叉树中所有路径表示的数字之和。例如,图8.4的二叉树有3条从根节点到叶节点的路径,它们分别表示数字395、391和302,这3个数字…

Flutter GetX的使用

比较强大的状态管理框架 引入库: dependencies:get: ^4.6.6一.实现一个简单的demo 实现一个计数器功能 代码如下: import package:flutter/material.dart; import package:get/get.dart;void main() > runApp(const GetMaterialApp(home: Home()…