如何实现前端跨域请求CORS

创作时间:

作者:

@小白创作中心

如何实现前端跨域请求CORS

引用

来源

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

跨域资源共享（CORS）是实现前端跨域请求的重要机制。CORS允许服务器明确指出哪些资源可以与不同域上的客户端共享，从而解决跨域问题。通过设置HTTP头部信息、使用代理服务器、JSONP以及服务器端配置，可以有效实现前端跨域请求。本文将详细解释这些方法，并提供具体实现步骤。

一、什么是CORS及其重要性

跨域资源共享（CORS）是一种安全机制，允许服务器控制哪些资源可以被不同域的客户端访问。不同的域名、协议或端口即被认为是不同的来源。CORS通过设置特定的HTTP头部信息，来管理这些跨域请求。它解决了前端应用与后端API的跨域数据交互问题，极大地提升了前后端分离开发的效率和安全性。

1、CORS的工作原理

CORS通过HTTP头部信息来控制跨域请求。主要包括以下几个头部：

**
Access-Control-Allow-Origin
**：指定允许访问资源的外部域。
**
Access-Control-Allow-Methods
**：指定允许的HTTP方法，例如GET、POST等。
**
Access-Control-Allow-Headers
**：指定允许的HTTP头部。

请求分为简单请求和预检请求。简单请求直接发送，而预检请求则需要浏览器先发送一个
OPTIONS
请求，以确认服务器是否允许实际请求。

2、为何需要CORS

现代Web应用通常需要与多个服务器进行交互，比如获取用户数据、提交表单等操作。如果没有CORS，浏览器会拒绝这些跨域请求，导致前端无法正常获取或提交数据。因此，CORS是前后端分离开发中必不可少的技术。

二、设置HTTP头部信息

通过设置HTTP头部信息，可以直接在服务器端控制跨域资源的共享。这是实现CORS最为直接和常用的方法。

1、设置

Access-Control-Allow-Origin
这个头部用于指定哪些域名可以访问资源。可以设置为具体的域名，也可以设置为通配符（

）以允许所有域。


// Node.js示例  

const express = require('express');  

const app = express();  

app.use((req, res, next) => {  

  res.header('Access-Control-Allow-Origin', '*'); // 允许所有域名  

  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');  

  res.header('Access-Control-Allow-Headers', 'Content-Type');  

  next();  

});  

app.get('/', (req, res) => {  

  res.send('Hello, World!');  

});  

app.listen(3000, () => {  

  console.log('Server running on port 3000');  

});

2、处理复杂请求的预检请求

对于复杂请求，浏览器会先发送一个
OPTIONS
请求。服务器需要对这个请求作出响应，告知浏览器实际请求是否被允许。


app.options('*', (req, res) => {  

  res.header('Access-Control-Allow-Origin', '*');  

  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');  

  res.header('Access-Control-Allow-Headers', 'Content-Type');  

  res.send();  

});

三、使用代理服务器

在开发环境中，使用代理服务器也是一种常见的方法。通过代理服务器，可以将前端的请求转发到不同的后端服务器，从而避免跨域问题。

1、配置代理服务器

可以使用Nginx或Apache等Web服务器来配置代理，也可以使用Node.js等开发环境自带的代理功能。


# Nginx配置示例  

server {  

    listen 80;  

    server_name example.com;  

    location /api/ {  

        proxy_pass http://backend-server:3000/;  

        proxy_set_header Host $host;  

        proxy_set_header X-Real-IP $remote_addr;  

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  

    }  

}

2、使用前端开发工具的代理功能

例如，在使用Webpack开发工具时，可以通过配置
devServer
来实现代理。


// Webpack配置示例  

module.exports = {  

  devServer: {  

    proxy: {  

      '/api': {  

        target: 'http://backend-server:3000',  

        changeOrigin: true,  

      },  

    },  

  },  

};