CORS跨域问题常见解决办法

已于 2025-02-21 17:59:09 修改
阅读量2k 收藏 12
点赞数 26
文章标签： java 前端
于 2025-02-21 17:53:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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跨域，如何解决CORS跨域的问题？
XiaoqiangClub的博客
09-11 282
什么是CORS跨域，如何解决CORS跨域的问题？
CORS跨域问题全解：原理、问题与解决方案
热门推荐
私聊前往站内信：https://i.csdn.net/#/msg/chat/weixin_44976692
08-19 2万+
在现代Web开发中，浏览器的同源策略（Same-Origin Policy）是一种重要的安全策略。它限制了从一个源（协议、域名和端口）加载的文档或脚本，与来自不同源的资源进行交互。这种限制防止了恶意网站在未经用户同意的情况下访问敏感数据。CORS是W3C标准之一，用于绕过同源策略的限制。在CORS机制下，服务器通过设置适当的HTTP头，告知浏览器允许哪些源访问其资源。CORS请求分为两类：简单请求（Simple Requests）和预检请求（Preflight Requests）。问题描述。
Vue 项目中遇到的跨域问题及解决方法(后台php)
08-27
主要介绍了Vue 项目中遇到的跨域问题及解决方法(后台php)，前端采用vue框架，后台php，具体解决方法，大家参考下本
JavaScript跨域访问CORS问题
weixin_34387468的博客
09-24 157
2019独角兽企业重金招聘Python工程师标准>>> ...
CORS 跨域问题解决&&预检（OPTIONS）请求解释
weixin_42118323的博客
04-15 9304
浏览器使用 OPTIONS 方法发起一个预检请求（preflight request），来感知服务端是否允许该跨域请求，服务器确认允许之后，才发起实际的 HTTP 请求，OPTIONS 请求没有附带请求数据，响应体也为空，简单来说就是一种探测，这就是预检请求，是浏览器的一种保护机制。简单请求的对立面就是非简单请求，也就是说不能同时满足简单请求条件的请求就是非简单请求，就可能会触发预检（OPTIONS）请求。Nginx 增加配置解决跨域问题，只使用一种解决问题即可，不要同时配置多个。
跨域解决方案之二-->CORS解决跨域
puyangmengxue的专栏
02-02 1453
前面简单介绍了JSONP解决跨域访问，顺便将看到的另一种跨域解决方案CORS（Cross-Origin Resource Sharing）即跨域资源共享作以简单介绍。关于CORS解决跨域的相关理论可以参考CORS（跨域资源共享） CORS（跨域资源共享） CORS（跨域资源共享），在此处就不做深入介绍。主要介绍一下CORS如何应用。 CORS解决跨域，是在后端做简单设置，下面是做的简单测试：
使用CORS解决跨域问题
weixin_34163553的博客
05-02 1436
1.跨域问题 1.1 什么是跨域 跨域是指跨域名的访问，以下情况都属于跨域： 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081 二级域名不同 item.jd.com 与 miaosha.jd.com 如果域名和端口都相同，但是请求路径不同，不属于跨...
解决CORS跨域问题
m0_60226911的博客
04-12 1587
CORS跨域问题，是当前主流web开发人员都绕不开的难题。但我们首先要明确以下几点跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。
CORS解决跨域问题
最新发布
weixin_68901096的博客
03-19 1305
text/plain；请求中的任意对象均没有注册任何事件监听器；请求中没有使用对象。请求中没有手动设置过请求头（例如，使用。
CORS跨域问题解决方案
IT飞牛
05-26 310
跨域问题主要是由于浏览器同源策略限制引起，简单来说，就是只相信自己人，不相信外人，只响应同域名发来的http请求，不相信其他域名发来的http请求。好处是减少上当受骗的几率，缺点是不符合webapi的大趋势，api访问会受限。 浏览器同源策略 同源策略(Same origin policy)是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以...
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跨域资源共享
10-17
CORS（跨域资源共享）是Web开发中解决跨域访问问题的一种机制，它允许浏览器在遵循同源策略的前提下，通过特定的HTTP头部与服务器通信，从而实现不同源之间的资源访问。这种机制是为了解决现代Web应用中由于同源策略...
跨域问题及CORS解决跨域问题方法
初学者乐园的博客
09-21 1120
1.跨域问题 1.1什么是跨域 跨域是指跨域名的访问，以下情况都属于跨域： 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081 二级域名不同 item.jd.com 与 miaosha.jd.com 如果域名和端口都相同，但是请求路径不同，不属于跨域...
跨域问题详解：CORS问题+解决办法
weixin_45565886的博客
09-29 2万+
跨域问题详解：CORS问题+解决办法
CORS解决跨域问题的几种方法
weixinhmz的博客
08-03 202
CORS解决跨域问题的几种方法
如何解决cors跨域问题
01-08
### 解决Web应用中的CORS跨域资源共享问题 #### 服务器端配置 为了使服务器能够处理来自不同源的请求，在响应头中添加适当的CORS头部信息是必要的。这可以通过多种方式实现，具体取决于所使用的框架和技术栈。 对于基于Java的应用程序，特别是采用Spring Boot构建的服务端应用程序而言，可以在控制器类上使用`@CrossOrigin`注解来指定哪些域名被允许发起跨站HTTP请求[^1]： ```java @RestController @RequestMapping("/api") @CrossOrigin(origins = "http://example.com") // 可以替换为实际前端地址 public class MyController { @GetMapping("/data") public ResponseEntity<String> getData() { return new ResponseEntity<>("Data from server", HttpStatus.OK); } } ``` 另一种更为灵活的方式是在全局范围内配置CORS支持，即创建一个自定义过滤器或利用内置的安全机制来进行统一管理。下面展示了一个简单的例子，它展示了如何通过重写`addCorsMappings`方法来达到这一目的： ```java @Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*"); } } ``` 除了上述两种常见的做法之外，还可以考虑借助第三方库的帮助简化操作过程；例如，在Node.js环境下运行的Express服务里，安装并引入专门用于处理此类场景下的中间件包即可轻松搞定一切设置工作[^2]。 #### 客户端调整 与此同时，作为开发者也需要关注到客户端部分可能存在的限制条件。当涉及到AJAX调用时，无论是传统的XMLHttpRequest还是现代化的Fetch API都提供了相应的选项让用户自行设定请求的行为模式——只需简单地将其属性值设为`'cors'`便能确保整个交互流程遵循标准协议的要求[^4]。 ```javascript // 使用axios发送带有credentials的跨域请求 const instance = axios.create({ withCredentials: true, }); instance.get('https://some-domain.com/api/data', { headers: { 'Authorization': `Bearer ${token}` }, }); ``` 值得注意的是，尽管这里提到的技术手段确实有助于缓解甚至完全消除大部分情况下遇到的问题，但在某些特殊场合下（比如涉及敏感数据传输），则需更加谨慎行事，并采取额外措施加强安全性保障。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值