资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

前端CORS跨域问题解决方案详解

创作时间:

作者:

@小白创作中心

前端CORS跨域问题解决方案详解

引用

来源

https://docs.pingcode.com/baike/2554060

跨域问题是指在浏览器中，前端代码（如JavaScript）试图访问不同域名下的资源时，浏览器会基于同源策略（Same-Origin Policy）阻止该请求。这种策略是为了保护用户数据，防止恶意网站窃取数据。然而，实际开发中，前端与后端往往分属不同的域名，跨域请求需求非常普遍。因此，理解和解决跨域问题是前端开发中的重要部分。

一、跨域问题的概述

跨域问题是指在浏览器中，前端代码（如JavaScript）试图访问不同域名下的资源时，浏览器会基于同源策略（Same-Origin Policy）阻止该请求。这种策略是为了保护用户数据，防止恶意网站窃取数据。然而，实际开发中，前端与后端往往分属不同的域名，跨域请求需求非常普遍。因此，理解和解决跨域问题是前端开发中的重要部分。

二、设置服务器响应头

最常见和推荐的解决跨域问题的方法是通过设置服务器响应头。以下是具体步骤：

1、配置 `Access-Control-Allow-Origin`

Access-Control-Allow-Origin 响应头指定哪些域可以访问资源。例如，允许所有域访问：

Access-Control-Allow-Origin: *

或允许特定域访问：

Access-Control-Allow-Origin: https://example.com

2、配置其他相关响应头

Access-Control-Allow-Methods：指定允许的HTTP方法，例如：

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

Access-Control-Allow-Headers：指定允许的请求头，例如：

Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials：指示是否允许发送Cookie，例如：

Access-Control-Allow-Credentials: true

服务器需要根据前端请求的具体情况返回相应的CORS头，确保前端可以顺利地访问资源。

三、使用代理服务器

代理服务器是前端开发中常用的解决跨域问题的方法。通过设置代理，前端请求会先发送到代理服务器，再由代理服务器转发给目标服务器。这样，浏览器认为请求是同源的，从而避免跨域问题。

1、在开发环境中使用代理

例如，使用Node.js的Express框架设置一个简单的代理服务器：

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

app.use('/api', (req, res) => {
    const url = 'https://api.example.com' + req.url;
    req.pipe(request(url)).pipe(res);
});

app.listen(3000);

前端请求 /api 路径时，实际会通过代理服务器转发到 https://api.example.com，从而绕过跨域限制。

2、在生产环境中使用代理

在生产环境中，可以使用Nginx等服务器软件配置代理。例如，Nginx配置示例如下：

server {
    listen 80;
    location /api {
        proxy_pass https://api.example.com;
        proxy_set_header Host $host;
    }
}

这样，前端请求 /api 路径时，会通过Nginx代理转发到目标服务器。

四、使用JSONP

JSONP（JSON with Padding）是一种早期的跨域解决方案，主要用于GET请求。通过在返回数据中包裹一个回调函数，使得浏览器认为这是一个脚本请求，从而绕过同源策略。

1、服务器端实现JSONP

服务器返回的数据格式如下：

callbackFunction({"key": "value"});

2、前端实现JSONP

前端通过动态创建 <script> 标签实现JSONP请求：

function jsonpRequest(url, callbackFunction) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callbackFunction}`;
    document.body.appendChild(script);
}

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

jsonpRequest('https://api.example.com/data', 'callbackFunction');

JSONP的局限性在于只支持GET请求，且存在安全隐患，一般不推荐在现代开发中使用。

五、使用CORS库和中间件

在一些开发框架中，可以使用现成的CORS库和中间件来简化跨域配置。

1、在Node.js和Express中使用cors中间件

安装cors库：

npm install cors

在服务器代码中使用：

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

app.use(cors());

app.get('/api/data', (req, res) => {
    res.json({ key: 'value' });
});

app.listen(3000);

2、在其他后端框架中使用CORS中间件

例如，在Spring Boot中，可以使用 @CrossOrigin 注解：

@RestController
@RequestMapping("/api")
public class ApiController {

    @CrossOrigin(origins = "https://example.com")
    @GetMapping("/data")
    public ResponseEntity<Map<String, String>> getData() {
        Map<String, String> data = new HashMap<>();
        data.put("key", "value");
        return ResponseEntity.ok(data);
    }
}