接口的跨域问题(CORS)

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

        1.什么是CORS

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

        2.CORS的注意事项

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

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

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

         响应头部中可以携带一个 Access-Control-Allow-Origin 字段,其语法如下:

Access-Control-Allow-Origin: <origin> | *
//其中,origin 参数的值指定了允许访问该资源的外域 URL//例如,下面的字段值将只允许来自 http://baidu.com的请求
res.setHeader('Access-Control-Allow-Origin', 'http://baidu.com')//如果指定了 Access-Control-Allow-Origin 字段的值为通配符*,表示允许来自任何域的请求,示例代码如下:
res.setHeader('Access-Control-Allow-Origin', '*')

       4.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 对额外的请求头进行声明,否则这次请求会失败!

// 允许客户端额外向服务器发送 Content-Type 请求头和 X-Custom-Header 请求头
//注意:多个请求头之间使用英文的逗号进行分割
res.setHeader('Access-Control-Allow-Headers','Content-Type, X-Custom-Header')

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

        默认情况下,CORS仅支持客户端发起 GET、POST、HEAD 请求

        如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法

        6.简单请求

        简单请求的特点: 客户端与服务器之间只会发生一次请求

        同时满足以下两大条件的请求,就属于简单请求:

        1)请求方式: GET、POST、HEAD 三者之一

        2)HTTP 头部信息不超过以下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、 Width、Content-Type (只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)

       7.预检请求

        预检请求的特点: 客户端与服务器之间会发生两次请求,OPTION 预检请求成功之后,才会发起真正的请求

        在浏览器与服务器正式通信之前,浏览器会先发送 OPTION 请求进行预检,以获知服务器是否允许该实际请求,所以这一次的OPTION请求称为“预检请求”。服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据

        只要符合以下任何一个条件的请求,都需要进行预检请求:

        1)请求方式为 GET、POST、HEAD 之外的请求 Method 类型
        2)请求头中包含自定义头部字段
        3)向服务器发送了 application/json 格式的数据

// 只允许 POST、GET、DELETE、HEAD 请求方法
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD' )
// 允许所有的 HTTP 请求方法
res.setHeader('Access-Control-Allow-Methods', '*')

        8.CORS使用

        cors 是Express 的一个第三方中间件。通过安装和配置cors 中间件,可以很方便地解决跨域问题使用步骤分为如下3步:

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

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

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

//导入express
const express = require('express')//创建服务器实例
const app = express()//一定要在路由之前,配置 cors 这个中间件,从而解决接口跨域的问题
const cors = require('cors')
app.use(cors())//启动服务器
app.listen(80, () => {console.log('express server running at http:127.0.0.0')
})

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

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

相关文章

python开发之个微自动转发朋友圈

简要描述&#xff1a; 转发朋友圈&#xff0c;直接xml数据。(对谁不可见) 请求URL&#xff1a; http://域名地址/forwardSns 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参…

Jmeter-beanshell里把整型数值赋值给变量

int cyclesNum 10;vars.put("cyclesNum",Integer.toString(result));

uView ui 1x uniapp 表格table行内容长度不一导致高度不统一而出现的不对齐问题

问题 因为td单元格内空长度不定导致行单元格未对齐 解决&#xff1a; 重置td的高度&#xff1a;height:100% 改为height:auto !import <u-table><u-tr v-for"(item,index) in Lineinfo.Cust_Name" ><u-td style"height: auto !important;back…

csgo/steam游戏搬砖项目的五大认知误区

CSGO/steam游戏搬砖项目的5大认知误区 1、卡价越高越难选品&#xff1f;越没利润&#xff1f; 2、明明buff卖价《 steam求购价&#xff0c;为什么还能赚钱&#xff1f; 3、实名资料少就没法批量操作账号&#xff1f; 4、本金少就没法玩&#xff1f; 5、这个项目的风险是不是很大…

关于IP与端口以及localhost

IP和域名 IP地址是一个规定&#xff0c;现在使用的是IPv4&#xff0c;既由4个0-255之间的数字组成&#xff0c;在计算机中&#xff0c;IP地址是分配给网卡的&#xff0c;每个网卡有一个唯一的IP地址。 域名(Domain Name)就是给IP取一个字符的名字&#xff0c;例如http://163.c…

pgsql分别获取日期中的年、月、日,并处理前台展示有小数点的情况

使用extract()函数 select extract(YEAR from 需要处理的日期字段) from tablename; --获取年份 select extract(MONTH from 需要处理的日期字段) from tablename; --获取月份 select extract(DAY from 需要处理的日期字段) from tablename; --获取日 实际应用&#xff1a;…

什么是线程安全问题?如何确保线程安全?进来看看就明白了!!

&#x1f308;&#x1f308;&#x1f308;今天给大家分享的是:什么是线程安全&#xff0c;在程序中多线程并发执行的时候&#xff0c;是否会产生线程不安全问题&#xff0c;以及如何解决线程不安全问题。 清风的CSDN博客 &#x1f6e9;️&#x1f6e9;️&#x1f6e9;️希望我的…

电脑资料删除后如何恢复?3个简单方法轻松恢复文件!

“我平常喜欢在电脑上保存很多学习资料&#xff0c;但由于资料太多&#xff0c;在清理电脑时我可能会误删一些比较有用的资料。想问问大家电脑资料删除后还有机会恢复吗&#xff1f;应该怎么操作呢&#xff1f;” 在数字化时代&#xff0c;很多用户都会选择将重要的文件直接保存…

【Linux 无网络状态下离线安装 MySQL】

【Linux 无网络状态下离线安装 MySQL】 一、准备安装包 可以去MySQL官网进行下载需要的安装包,下面这个链接 Mysql的下载地址 Microsoft Windows 版本 Linux-Generic 版本 5.7.4的版本和8.0版本的下载地址 全部版本的下载地址 libao的下载地址(版本一样,如有报错留言…

github timeout 问题解决 与访问加速

github登录总是超时,非常影响体验&#xff0c;原因不是被github被限制了&#xff0c;而是github的DNS被污染了&#xff0c;可以通过手工设置DNS解析来处理。 到这个地址 https://raw.hellogithub.com/hosts 下载最新的github hosts文件 修改本地配置&#xff0c; 注意需要使用…

vue2 el-table 封装

vue2 el-table 封装 在 custom 文件夹下面创建 tableList.vue直接上代码&#xff08;代码比较多&#xff0c;复制可直接用&#xff09; <template><div class"mp-list"><el-tableref"multipleTable"class"mp-custom-table":dat…

PowerShell命令小记

1. 使用命令删除指定文件或文件夹 在 PowerShell 中&#xff0c;你可以使用 Remove-Item 命令递归删除文件夹下的指定文件。以下是一条命令的示例&#xff0c;该命令删除指定文件夹及其子文件夹中的所有 .txt 文件&#xff1a; Remove-Item -Path "D:\test" -Recur…

GitHub----使用记录

一、上传文件到仓库 1、首先新建一个github仓库 然后先记住这一句指令 2、下载git工具 https://git-scm.com/downloads 下载工具安装不用运行 3、使用git工具上传文件并推送 找到你想上传的文件的位置&#xff0c;右击git Bush here git init &#xff1a;初始化这个仓…

Windows下搭建Tomcat HTTP服务,发布公网远程访问

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…

C语言--根据成绩判断等级

一.题目描述 如果学生的成绩小于60分&#xff0c;那么输出不及格 如果学生的成绩大于60分小于85分&#xff0c;那么输出良好 如果学生的成绩大于85分&#xff0c;那么输出优秀 二.代码实现 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> //根据成绩打印等级 //scor…

程序员必备免费好用的API接口

实人认证&#xff08;人像三要素&#xff09;&#xff1a;输入姓名、身份证号码和一张人脸照片&#xff0c;与公安库身份证头像进行权威比对&#xff0c;返回比对分值。实名认证&#xff08;身份证二要素&#xff09;&#xff1a;核验身份证二要素&#xff08;姓名和身份证号码…

高效工作利器:UI设计师常去的6个设计网站!

即时设计 即时设计是一种强大的云设计工具&#xff0c;已成为许多设计师、产品经理和开发人员的首选工具之一。即时设计用户可以使用内置的工具和功能快速创建和编辑设计&#xff0c;或与其他用户共享和合作。此外&#xff0c;即时设计还有一个丰富的资源广场&#xff0c;为用…

Maven——使用Nexus创建私服

私服不是Maven的核心概念&#xff0c;它仅仅是一种衍生出来的特殊的Maven仓库。通过建立自己的私服&#xff0c;就可以降低中央仓库负荷、节省外网带宽、加速Maven构建、自己部署构件等&#xff0c;从而高效地使用Maven。 有三种专门的Maven仓库管理软件可以用来帮助大家建立…

redis 内存机制探索篇

info memory 查看redis 内存使用情况出现的问题&#xff0c;公司在导入大量redis key 的时候&#xff0c;想要看一下redis 内存使用情况 &#xff0c;发现used_memory_peak_perc 和 used_memory_dataset_perc 马上达到100%&#xff0c;这个时候很慌张&#xff0c;是不是当前red…

SQL Server :关系模式的键码与闭包计算

一、键码的定义 首先我们给出 键码的定义 如下 定义&#xff1a;已知 R<U,F> 是属性集 U 的关系模式&#xff0c;F是属性集 U 上的一组函数依赖&#xff0c;设 K 为 R<U,F> 中的属性或属性组合&#xff0c;若K ⇒ U - K 且 K 的任何真子集都不能决定 U&#xff0c…