API 需要授权的请求 return CORS 错误

Question

初始问题

我正在开发一个通过 API 访问数据的 Web 应用程序 (react)。 API 出于开发原因在我本地计算机上的 docker 容器上运行。简单的 GET 请求（通过 axios）让我遇到了 CORS 并发症（...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.）。

一些研究通过运行在另一个容器中的 nginx 反向代理解决了我的问题。我基本上使用 this configuration 作为 nginx 服务器。

新问题

随着我构建应用程序的进展，我需要将 JWT 发送到 API 以访问和更改一些条目。需要再次发送 JWT 的请求会收到 CORS 错误消息。

API 检查 JWT 签名（RS256 生成）。我只需要将它转发到 API 服务器。

ALSO：来自控制台的 JWT 的简单 curl 请求正在运行。

配置

axios


const axiosConfig = {
    responseType: "json",
    withCredentials: false,
    mode: "no-cors",
    headers: {
        'Access-Control-Allow-Origin': "*",
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
        'Content-Type': 'application/json',
        'Authorization': 'Bearer <JWT as string>',
    },
};

const apiGetRequest = async (route, callback) => {
    try {
        const apiUrl = URL + route;
        axios.get(apiUrl, {
            axiosConfig
        })
            .then(res => {
                callback(res);
            })
            .catch(function (error) {
                console.log(error);
            });

    } catch (error) {
        console.log(error);
    }
}

nginx configuration
Docker 图片 api

version: "3.9"

services:

    db:
        image: mariadb:latest
        container_name: db
        env_file:
            - ./mariadb/.env
        volumes:
            - ./mariadb/create-schema-docker.sh /docker-entrypoint-initdb.d
            - db-data:/var/lib/mysql
        ports:
            - 3306:3306

    rest:
        image: mds4ul/station-registry:latest
        container_name: api
        environment:
            - DB_HOST=db
            - CONTEXT_PATH=api
        env_file:
            - ./rest/.env
        depends_on:
            - db
        ports:
            - 80:8080

volumes:
    db-data:

问题

为什么需要 jwt 的请求会出现 CORS 错误，而不需要 jwt 的请求却不会？
我必须更改哪一部分才能使这项工作正常进行？

Answer 1

所以回答另一个问题来解决我的一个令人尴尬的简单问题。

我切换到具有以下配置的 express.js 代理服务器：

const express = require('express')
const app = express()
const axios = require('axios')
const cors = require('cors')
var bodyParser = require('body-parser')

app.use(cors({
    origin: '*'
}))
app.use(bodyParser.json())

require('dotenv').config()

const headers = {
    "X-Authorization": <token>,
}

app.get(':endpoint([\/\w\.-]*)', function (req, res) {
    const endpoint = (process.env.API_BASE_URL).replace(/\/$/, "") + req.params.endpoint;
    axios.get(endpoint, { headers }).then(response => {
        res.json(response.data)
    }).catch(error => {
        res.json(error)
    })
})
app.listen(3001)

我想我只是无法弄清楚这个用例的 nginx 配置。因此 express.js 我现在可以访问需要授权的资源。

API 需要授权的请求 return CORS 错误

API Requests that need Authorization return CORS error

api

nginx

cors

jwt

axios

初始问题

新问题

配置

问题