【CORS 报错】跨域请求问题:CORS 多种环境下的解决方案

在这里插入图片描述

🔥 个人主页:空白诗

在这里插入图片描述

文章目录

    • 一、CORS错误的常见原因
    • 二、解决方案
      • 1. Vue3 + Vite项目下的解决方案
        • 创建Vue3 + Vite项目
        • 配置Vite的代理
        • 发送请求
      • 2. jQuery项目下的解决方案
        • 使用CORS请求头
        • 使用JSONP
      • 3. 其他环境下的解决方案
        • 使用服务器端代理
            • 设置CORS头
            • 使用Nginx配置代理
    • 三、总结

在这里插入图片描述

跨域资源共享(CORS, Cross-Origin Resource Sharing)问题是前端开发中的常见挑战。本文将详细介绍在不同环境下(如Vue3 + Vite项目、jQuery项目以及其他环境下)的解决方案。


一、CORS错误的常见原因

跨域问题的本质是浏览器出于安全考虑,限制从一个源(域、协议、端口)加载资源到另一个源。这种安全机制被称为“同源策略”。同源策略规定,只有当请求的URL与当前网页的URL具有相同的协议、域名和端口时,浏览器才允许该请求通过。

  1. 缺乏CORS头
    服务器没有设置正确的CORS响应头,导致浏览器拒绝请求。例如,浏览器期望服务器响应中包含 Access-Control-Allow-Origin 头,如果没有设置该头,浏览器会阻止请求。

  2. 跨域请求被禁止
    默认情况下,浏览器会阻止跨域请求以保护用户的安全。如果服务器没有允许特定的域进行访问,浏览器会抛出CORS错误。

  3. 预检请求失败
    对于一些复杂的请求,浏览器会发送一个预检请求(OPTIONS请求)来确认服务器是否允许该请求。如果预检请求失败,则会导致CORS错误。


二、解决方案

1. Vue3 + Vite项目下的解决方案

通过Vite的开发服务器代理功能,可以将本地的请求代理到不同的服务器,从而避免跨域问题。以下是具体步骤:

创建Vue3 + Vite项目
npm create vite@latest
cd your-project-name
npm install

选择Vue3模板,并进入项目目录。

配置Vite的代理

在Vite项目的根目录下找到vite.config.ts(或vite.config.js),并进行以下配置:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'http://api.example.com', // 目标服务器changeOrigin: true, // 是否改变请求源rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径},},},
});
发送请求

在Vue组件中,可以通过axios或者fetch发送请求。例如:

<template><div><button @click="fetchData">获取数据</button><div v-if="data">{{ data }}</div></div>
</template><script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';export default defineComponent({setup() {const data = ref(null);const fetchData = async () => {try {const response = await axios.get('/api/data');data.value = response.data;} catch (error) {console.error('请求错误:', error);}};return {data,fetchData,};},
});
</script>

2. jQuery项目下的解决方案

在jQuery项目中,可以通过设置请求头或使用JSONP来解决CORS问题。

使用CORS请求头

确保服务器设置了正确的CORS头,如 Access-Control-Allow-Origin。在客户端发起请求时:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>$.ajax({url: 'http://api.example.com/data',method: 'GET',success: function(data) {console.log(data);},error: function(xhr, status, error) {console.error('请求错误:', error);}});
</script>
使用JSONP

如果服务器支持JSONP,可以通过以下方式解决跨域问题:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>$.ajax({url: 'http://api.example.com/data',method: 'GET',dataType: 'jsonp', // 使用JSONPsuccess: function(data) {console.log(data);},error: function(xhr, status, error) {console.error('请求错误:', error);}});
</script>

3. 其他环境下的解决方案

使用服务器端代理

在许多情况下,可以在服务器端设置一个代理,将跨域请求通过服务器端转发。例如,在Node.js中可以使用http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware');app.use('/api', createProxyMiddleware({target: 'http://api.example.com',changeOrigin: true,pathRewrite: {'^/api': '',},
}));
设置CORS头

确保服务器响应中包含正确的CORS头。例如,在Node.js + Express中:

const express = require('express');
const app = express();app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');next();
});app.get('/data', (req, res) => {res.json({ message: 'Hello World' });
});app.listen(3000, () => {console.log('Server running on port 3000');
});
使用Nginx配置代理

在Nginx中,可以通过配置代理解决CORS问题:

server {listen 80;server_name yourdomain.com;location /api/ {proxy_pass http://api.example.com/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

三、总结

CORS问题是前端开发中常见的一个挑战,但通过合理的代理配置和服务器设置可以有效解决。在不同环境下,可以使用Vite的代理功能、设置请求头、JSONP、服务器端代理、Nginx代理等多种方式来解决跨域问题。希望本文对你理解和解决CORS问题有所帮助。

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

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

相关文章

“再来一单“业务功能开发

文章目录 概要整体架构流程技术细节小结 概要 再来一单”功能常见于餐饮、零售、外卖等行业&#xff0c;主要目的是为了简化用户的重复购买流程&#xff0c;提高用户体验和效率。 需求分析以及接口设计 再来一单就是将原订单中的商品重新加入到购物车中,所以本质上是"增…

java之WIFI信号模块

开发步骤分为以下几点&#xff1a; 1.在 AndroidManifest 中声明相关权限&#xff08;网络和文件读写权限&#xff09; 声明权限: <uses-permission android:name"android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name"android.…

matlab y=sin(x) - 2/π*(x)函数绘制

[TOC](matlab ysin(x) - 2/π*(x)函数绘制) ysin(x) - 2/π*(x) clc; clear; close all; x_axis_length 10; y_axis_length 10; % 创建 x 值向量 x_positive linspace(0.1, 10, 1000); % 正半轴上的 x 值 x_negative linspace(-10, -0.1, 1000); % 负半轴上的 x 值% 计算…

前端新手小白的React入坑指南

有个小伙伴跟我说&#xff0c;已经毕业了&#xff0c;开始实习了。但公司现在用的还是Vue&#xff0c;领导说是过段时间让他用React做项目&#xff0c;先自己学习起来。 我给他找了一些文档&#xff0c;顺便着呢&#xff0c;反正自己也写博客&#xff0c;自己也写一份吧&#x…

华为视觉智驾来了!买车千万不要乱选了

文 | AUTO芯球 作者 | 雷慢 华为又偷偷地憋大招了&#xff0c; 你们看&#xff0c;余承东昨天天悄咪咪地发了条微博宣布&#xff0c; 智界S7Pro版开始首发搭载华为视觉智驾方案&#xff0c; 也就是华为ADS基础版&#xff0c;车也陆续交给了车主们&#xff0c; 那问题来了&a…

江科大/江协科技 STM32学习笔记P13

文章目录 TIM定时中断1、TIM简介计数器PSC预分频器&#xff08;Prescaler&#xff09;ARR自动重装寄存器&#xff08;Auto Reload Register&#xff09; 2、定时器类型基本定时器主模式触发DAC 通用定时器高级定时器 3、定时器原理定时中断基本结构预分频器时序计数器时序RCC时…

从零开始掌握tcpdump:参数详解

Linux tcpdump命令详解 1. 语法 tcpdump [-adeflnnNOpqStvxX] [-c <数据包数目>] [-dd] [-ddd] [-F <表达文件>] [-i <网络界面>] [-r <数据包文件>] [-s <数据包大小>] [-tt] [-T <数据包类型>] [-vv] [-w <数据包文件>] [输出数…

【办公软件】Office 2019以上版本PPT 做平滑切换

Office2019以上版本可以在切页面时做平滑切换&#xff0c;做到一些简单的动画效果。如下在快捷菜单栏中的切换里选择平滑。 比如&#xff0c;在两页PPT中&#xff0c;使用同一个形状对象&#xff0c;修改了大小和颜色。 选择切换为平滑后&#xff0c;可以完成如下的动画显示。 …

Mysql环境部署

一、centos7 中安装 mysql 8.x 1、下载安装包 wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2、解压 tar -zxvf mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 3、卸载mariodb yum remove -y *mariadb* 4、依次安装依赖包…

构建积极心理学资源站:从零到一的旅程

自己搭建的心理学资源站 积极心理学网站&#xff1a;致力于推动积极未来 欢迎来到kuakua.app&#xff0c;这是一个致力于积极心理学的资源站。 作为一个独立开发者&#xff0c;我与一些热爱心理学的学生合作&#xff0c;创建了这个网站。 我们的目标是通过分享心理学知识和资源…

【云原生】Prometheus监控Docker指标并接入Grafana

目录 一、前言 二、docker监控概述 2.1 docker常用监控指标 2.2 docker常用监控工具 三、CAdvisor概述 3.1 CAdvisor是什么 3.2 CAdvisor功能特点 3.3 CAdvisor使用场景 四、CAdvisor对接Prometheus与Grafana 4.1 环境准备 4.2 docker部署CAdvisor 4.2.2 docker部署…

vulnhub靶场serial-php渗透(蜥蜴细!)

目录 一、信息收集 1.探测主机存活&#xff08;目标主机IP地址&#xff09; 2.访问web服务 3.后台目录和端口扫描 4.解析bak.zip源码 二、漏洞利用 1.构造payload 2.通过bp的repeater模块 3.get shell 4.获取反弹shell 三、提升权限 1. 查看系统版本&#xff0c;内核…

MySQL数据库忘记密码,怎么重新修改密码?

1、停止MySQL数据服务 systemctl stop mariadb 2、跳过权限表检查并启动MySQL mysqld_safe --skip-grant-tables& 使用mysqld_safe --skip-grant-tables&命令后&#xff0c;不需要密码也可以进去MySQL&#xff0c;随便输入密码也是可以进入MySQL的&#xff0c;因为这个…

Traefik系列

一、入门Traefik系列——基础简介 官方文档 https://doc.traefik.io/traefik/[1] 简介 Traefik是一个为了让部署微服务更加便捷而诞生的现代HTTP反向代理、负载均衡工具。它支持多种后台 (Docker, Swarm, Kubernetes, Marathon, Mesos, Consul, Etcd, Zookeeper, BoltDB, Re…

CentOS7.9 利用 KubeKey 扩容 Kubernetes v1.26 Worker 节点实战

转载&#xff1a;CentOS7.9 利用 KubeKey 扩容 Kubernetes v1.26 Worker 节点实战 知识点 定级&#xff1a;入门级 KubeKey 安装部署 KubeSphere 和 Kubernetes KubeKey 定制化部署集群 KubeSphere v3.4.0 功能概览 Kubernetes 基本操作 CentOS 系统内核升级 演示服务器配…

Python爬虫:下载人生格言

Python爬虫:下载人生格言 爬取网页 将这些格言下载存储到本地 代码: import requests #导入requests库&#xff0c;用于提取网页 from lxml import etree#导入lxml库&#xff0c;用于Xpath数据解析#请求头 header{ user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) A…

游戏加速器推荐 网游加速器排行榜

游戏加速器推荐&#xff0c;玩游戏用什么加速器&#xff01;我得给你推荐一款我常用的。首先呢&#xff0c;就是深度加速器&#xff0c;它针对目前手游网游的游戏加速效果特别棒&#xff0c;而且界面也很友好。 另外&#xff0c;还有深度加速器&#xff0c;这款加速器不仅支持国…

【信创】Linux操作系统上使用命令查看设备序列号

原文链接&#xff1a;【信创】Linux操作系统上使用命令查看设备序列号 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于在信创操作系统上如何查看设备序列号的文章。在进行设备管理、维护和售后服务时&#xff0c;设备序列号是一个非常重要的信息。本文将详细介绍…

HarmonyOS入门

HarmonyOS 系统定义 HarmonyOS 是一款面向万物互联时代的、全新的分布式操作系统。 Harmony提出了基于同一套系统能力、适配多种终端形态的分布式理念&#xff0c;能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设置&#xff0c;提供全场景&#xff08;移动办公、运动…

simulink绘制bode图

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…