CORS跨域问题常见解决办法

已于 2025-02-21 17:59:09 修改
阅读量2.3k 收藏 12
点赞数 26
CC 4.0 BY-SA版权
文章标签： java 前端
于 2025-02-21 17:53:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdnuu123/article/details/145782369

1.引言

在现代前端开发中，跨域资源共享（Cross-Origin Resource Sharing, CORS）是一种通过设置 HTTP 头来允许或阻止不同源之间的资源访问的机制。浏览器出于安全考虑，默认情况下会阻止跨域请求。本文将详细介绍 CORS 的工作原理、常见的 CORS 错误及其解决方案。

2. 什么是 CORS？

CORS 是一种浏览器安全机制，用于防止跨域资源请求带来的潜在安全风险。浏览器在执行跨域请求时，会检查目标服务器是否允许访问。如果服务器没有正确设置 CORS 头信息，浏览器将阻止跨域请求，并返回 CORS 错误。

2.1 同源策略

CORS 是基于**同源策略（Same-Origin Policy）**的。所谓同源，指的是协议（scheme）、域名（hostname）和端口号（port）三者完全一致。同源策略规定，只有同源的请求才会被允许访问。跨域请求，即不同源的请求，需要通过 CORS 头来管理。

示例：
以下两个 URL 属于同源：

  • https://example.com

  • https://example.com:443

而以下 URL 则属于跨域请求：

  • https://api.example.com（域名不同）

  • https://example.com:8080（端口不同）

  • http://example.com（协议不同）

2.2 CORS 请求的类型

CORS 请求可以分为以下两种类型：

简单请求：GET、POST、HEAD 等方法且没有自定义的 HTTP 头信息，浏览器直接发送请求。
预检请求（Preflight Request）：对非简单请求（如 PUT、DELETE 或自定义头信息）会先发送 OPTIONS 请求，确认服务器是否允许再发送实际请求。

3. CORS 错误的原因

浏览器在处理跨域请求时，如果没有收到目标服务器的明确许可（通过 CORS 头信息），会抛出 CORS 错误，常见错误包括：

Access-Control-Allow-Origin 头缺失或配置错误
Access-Control-Allow-Methods 头未正确配置允许的 HTTP 方法
Access-Control-Allow-Headers 头未正确声明自定义的请求头

 4. 解决办法

1. 服务器端配置 CORS 头

最直接的方式是服务器端响应中添加 CORS 相关的头信息来允许跨域请求。常见的 CORS 头包括：

  • Access-Control-Allow-Origin: 允许哪些域名访问资源。可以指定单个域名，或者设置为 * 允许所有域名访问。
  • Access-Control-Allow-Methods: 允许的 HTTP 方法，如 GET, POST, PUT, DELETE 等。
  • Access-Control-Allow-Headers: 允许的请求头，如 Content-Type, Authorization 等。
  • Access-Control-Allow-Credentials: 是否允许发送 Cookie 信息（值为 true 或 false）。
  • Access-Control-Max-Age: 指定预检请求的结果缓存时间（单位是秒）。
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

在服务器端配置这些头信息后，浏览器会根据这些信息判断是否允许跨域请求。需要注意的是，Access-Control-Allow-Origin 不能设置为 *，如果需要携带凭证（如 Cookies），必须指定明确的域名。

2. 使用预检请求（Preflight Request）

对于一些复杂请求（如使用了 PUT、DELETE 方法，或者自定义了请求头），浏览器会首先发送一个 OPTIONS 请求来询问服务器是否允许跨域操作。服务器需要对此做出响应并返回 CORS 头。

示例：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

服务器在响应中包含上述头信息，表示允许来自指定源的请求。

3. 通过代理解决

如果服务器无法直接修改 CORS 配置，可以通过代理的方式解决跨域问题。前端应用将请求发送到本地的代理服务器，由代理服务器转发请求到目标服务器。这样浏览器会认为请求和响应来自同一域。

示例：

使用 Node.js 创建代理服务器，或者前端框架（如 Vue 或 React）中的开发服务器可以配置代理。

Node.js 代理示例：

const express = require('express');
const app = express();
const axios = require('axios');

app.use('/api', (req, res) => {
  axios.get(`https://target-server.com${req.url}`)
    .then(response => {
      res.json(response.data);
    })
    .catch(error => {
      res.status(500).send(error);
    });
});

app.listen(3000, () => {
  console.log('Proxy server running on http://localhost:3000');
});

在上述示例中，前端请求 http://localhost:3000/api，代理服务器将请求转发到 https://target-server.com，从而避免了跨域问题。

4. JSONP（仅限 GET 请求）

JSONP 是一种传统的解决跨域问题的方式，通过动态插入 <script> 标签来实现跨域。它只适用于 GET 请求，并且需要服务器支持 JSONP 格式。

示例：

function handleResponse(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

需要注意的是，JSONP 存在安全隐患，且仅支持 GET 请求，因此在现代开发中使用较少。

5. WebSocket

WebSocket 协议支持跨域通信，可以用于实时应用。它不像 HTTP 请求那样受到 CORS 限制，但需要服务器支持 WebSocket。

示例：

var socket = new WebSocket('ws://www.example.com/socket');
socket.onopen = function() {
  socket.send('Hello Server!');
};
socket.onmessage = function(event) {
  console.log('Received:', event.data);
};

WebSocket 适用于需要实时双向通信的场景，如在线聊天、实时数据推送等。

6. 使用 PostMessage

HTML5 中的 postMessage 方法允许跨源通信，适用于不同源的窗口或 iframe 之间的通信。

示例：

<!-- 父页面 -->
<iframe id="iframe" src="https://www.example.com/child.html"></iframe>
<script>
  var iframe = document.getElementById('iframe');
  iframe.onload = function() {
    var data = { name: 'Alice' };
    iframe.contentWindow.postMessage(data, 'https://www.example.com');
  };
  window.addEventListener('message', function(event) {
    if (event.origin === 'https://www.example.com') {
      console.log('Received from child:', event.data);
    }
  });
</script>

在上述示例中，父页面通过 postMessage 向子页面发送数据，子页面通过监听 message 事件接收数据。

7. Nginx 反向代理

通过 Nginx 配置反向代理，将请求转发到目标服务器，从而避免浏览器的同源策略限制。

示例：

server {
  listen 80;
  server
::contentReference[oaicite:0]{index=0}

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

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

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

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

8.2 配置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/, ''), // 重写路径
      },
    },
  },
});

这段代码是一个用于配置 Vite 项目的 vite.config.ts（或者 .js）文件的示例。它做了以下几件事：

  1. 引入依赖：

    • import { defineConfig } from 'vite'; 这一行从 Vite 库中导入了 defineConfig 函数，这是 Vite 推荐的配置方式，可以帮助 Vite 推断出配置的类型。
    • import vue from '@vitejs/plugin-vue'; 这一行引入了 Vite 的 Vue 插件，用于支持 Vue 组件的加载和构建。

  2. 定义 Vite 配置： defineConfig 函数用来定义和导出 Vite 配置对象。这是推荐的方式，它可以提供类型推导和 IntelliSense。

  3. 配置 server 中的 proxy： 在 server 配置项中，定义了代理设置。这里的目的是解决跨域问题或将某些 API 请求代理到其他服务器。

    • '/api': 这表示当你在开发环境中请求以 /api 开头的 URL 时，Vite 会自动将这些请求代理到其他服务器。
    • target: 'http://api.example.com': 这是代理目标服务器的 URL。当请求路径匹配 /api 时，会被转发到 http://api.example.com。
    • changeOrigin: true: 这意味着请求会被代理时，Origin HTTP 头会被设置为目标 URL 的 origin。通常用于避免 CORS 问题。
    • rewrite: (path) => path.replace(/^\/api/, ''): 这表示请求的路径会在转发到目标服务器之前进行重写。/^\/api/ 匹配路径开头的 /api，然后将其去掉。所以如果你请求 /api/user，它会被重写为 /user，并被转发到 http://api.example.com/user。
8.3 发送请求

在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>
CORS跨域问题全解：原理、问题与解决方案
私聊前往站内信：https://i.youkuaiyun.com/#/msg/chat/weixin_44976692
08-19 2万+
在现代Web开发中，浏览器的同源策略（Same-Origin Policy）是一种重要的安全策略。它限制了从一个源（协议、域名和端口）加载的文档或脚本，与来自不同源的资源进行交互。这种限制防止了恶意网站在未经用户同意的情况下访问敏感数据。CORS是W3C标准之一，用于绕过同源策略的限制。在CORS机制下，服务器通过设置适当的HTTP头，告知浏览器允许哪些源访问其资源。CORS请求分为两类：简单请求（Simple Requests）和预检请求（Preflight Requests）。问题描述。
什么是CORS跨域，如何解决CORS跨域的问题？
XiaoqiangClub的博客
09-11 325
什么是CORS跨域，如何解决CORS跨域的问题？
跨域解决方案之二-->CORS解决跨域
puyangmengxue的专栏
02-02 1488
前面简单介绍了JSONP解决跨域访问，顺便将看到的另一种跨域解决方案CORS（Cross-Origin Resource Sharing）即跨域资源共享作以简单介绍。关于CORS解决跨域的相关理论可以参考CORS（跨域资源共享） CORS（跨域资源共享） CORS（跨域资源共享），在此处就不做深入介绍。主要介绍一下CORS如何应用。 CORS解决跨域，是在后端做简单设置，下面是做的简单测试：
使用CORS解决跨域问题
weixin_34163553的博客
05-02 1459
1.跨域问题 1.1 什么是跨域 跨域是指跨域名的访问，以下情况都属于跨域： 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081 二级域名不同 item.jd.com 与 miaosha.jd.com 如果域名和端口都相同，但是请求路径不同，不属于跨...
什么是 CORS ？一文搞懂 CORS 跨域原理！零基础入门到精通，收藏这一篇就够了
最新发布
shandongjiushen的博客
06-02 846
CORS，全称为“跨域资源共享”（Cross-Origin Resource Sharing），是一种机制，它使用额外的 HTTP 头来告诉浏览器允许一个网页从另一个域（不同于该网页所在的域）请求资源。这样可以在服务器和客户端之间进行安全的跨域通信。
解决CORS跨域问题
m0_60226911的博客
04-12 1623
CORS跨域问题，是当前主流web开发人员都绕不开的难题。但我们首先要明确以下几点跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。
CORS解决跨域问题
weixin_68901096的博客
03-19 1688
text/plain；请求中的任意对象均没有注册任何事件监听器；请求中没有使用对象。请求中没有手动设置过请求头（例如，使用。
CORS跨域问题解决方案
IT飞牛
05-26 317
跨域问题主要是由于浏览器同源策略限制引起，简单来说，就是只相信自己人，不相信外人，只响应同域名发来的http请求，不相信其他域名发来的http请求。好处是减少上当受骗的几率，缺点是不符合webapi的大趋势，api访问会受限。 浏览器同源策略 同源策略(Same origin policy)是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以...
跨域问题及CORS解决跨域问题方法
初学者乐园的博客
09-21 1131
1.跨域问题 1.1什么是跨域 跨域是指跨域名的访问，以下情况都属于跨域： 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081 二级域名不同 item.jd.com 与 miaosha.jd.com 如果域名和端口都相同，但是请求路径不同，不属于跨域...
你可能不知道的CORS跨域资源共享
10-17
CORS（跨域资源共享）是Web开发中解决跨域访问问题的一种机制，它允许浏览器在遵循同源策略的前提下，通过特定的HTTP头部与服务器通信，从而实现不同源之间的资源访问。这种机制是为了解决现代Web应用中由于同源策略...
CORS解决跨域问题（403问题）
04-04
Tomcat lib目录下添加cors-filter-1.7.jar，java-property-utils-1.9.jar这两个jar包，项目中web.xml 中添加filter，以及出现OPTIONS 类型的请求并返回403的解决方案；压缩文件包含jar文件，以及web.xml配置。
跨域问题详解：CORS问题+解决办法
热门推荐
weixin_45565886的博客
09-29 2万+
跨域问题详解：CORS问题+解决办法
CORS解决跨域问题的几种方法
weixinhmz的博客
08-03 217
CORS解决跨域问题的几种方法
CORS解决跨域的几种实现方式
m0_59508658的博客
08-19 7776
目录 一、什么是跨域 二、同源策略 非同源限制 三、跨域的解决办法 CORS 3.1、两种请求 3.1.1、简单请求 3.1.2、非简单请求 3.2、CORS常用解决跨域的方法 3.2.1、HttpServletResponse添加头信息 3.2.2、使用Spring注解@CrossOrigin 3.2.3、通过配置类解决跨域 一、什么是跨域 当一个请求的url的协议、域名、端口任意一个与当前页面的url不同即为跨域 a页面想获取b页面的资源，a与b页面的协议、域名或端口
CORS 跨域解决方案
running_pork的博客
01-04 2153
复杂请求则需要2次，先发起options请求，确认目标资源是否支持跨域，浏览器会根据服务端响应的header自动处理剩余的请求，如果响应支持跨域，则继续发出正常请求；简单跨域请求只需要请求一次，复杂跨域请求需要请求2次，第一次是预检请求（options请求），第二次是真是的跨域请求。所以，当触发预检时，跨域请求便会发送2次请求，增加请求次数，同时，也延迟了请求真正发起的时间，会严重地影响性能。crossDomain: true //// 会让请求头中包含跨域的额外信息，但不会含cookie。
如何解决CORS跨域问题
superioc的博客
03-30 1701
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；具体来讲，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现；
PHP文件CORS跨域问题解决办法
02-25
### 如何在PHP中解决CORS跨域问题 #### 设置响应头 为了处理跨域资源共享(CORS)问题，在PHP脚本最开始处设置HTTP响应头是一个常见做法。这可以通过`header()`函数来完成，确保服务器返回适当的Access-Control-Allow-Origin(ACAO)头部。 ```php <?php // 允许所有域名访问资源 header("Access-Control-Allow-Origin: *"); // 如果仅限特定域名, 替换*为指定URL // header("Access-Control-Allow-Origin: https://example.com"); // 支持的请求方法 header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); // 允许携带认证信息(cookie等) header("Access-Control-Allow-Credentials: true"); // 允许的自定义请求头字段 header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With"); ?> ``` 上述代码片段展示了如何配置基本的CORS策略[^1]。对于更复杂的场景，比如当需要对不同路由实施不同的CORS政策时，可以考虑基于框架特性或第三方库来进行管理。 #### 中间件方式（以Laravel为例） 在一个结构化的Web应用里，特别是像Laravel这样的MVC架构下，推荐采用中间件的方式来统一管理和控制CORS行为。创建一个专门用于处理CORS逻辑的中间件，并将其注册到全局或者针对某些特定路由组/控制器上[^4]。 ```php public function handle($request, Closure $next) { // 添加必要的CORS头部 return $next($request)->header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); } ``` 这种方法不仅使代码更加整洁易维护，而且便于扩展和调整安全策略。 #### 安全性和最佳实践 值得注意的是，在开放API接口的同时也要注意保护系统的安全性。遵循最小权限原则只暴露必需的服务端点；避免过度宽松地使用通配符(*)除非确实有必要；如果启用了凭证共享(`Allow-Credentials`)则不允许将Origin设为通配符[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值