Reactjs Symfony回应Cors问题

我使用

Symfony 5

和

React

，使用

docker

这两个容器位于不同的docker compose上，但位于同一个NewWork上，因此它们可以看到并相互ping

现在我想

在我的一个api路由上发布一些东西，下面是我的请求：

const handleSubmit = async function (e) {
        setError(null)
        setLoading(true)
        e.preventDefault()
        const data = new FormData(e.target)
        console.warn(data)
        try {
            const response = await fetch('https://localhost:8443/authentication_token', {
                credentials: 'include',
                headers: {
                    Accept: 'application/json',
                },
                method: 'POST',
                body: data,
            })

            console.warn(response)
            const responseData = await response.json()
            console.warn(responseData)
            onConnect(responseData)
        } catch (e) {
            setError(e)
            setLoading(false)
        }
    }

然后我得到以下错误：

Access to fetch at 'https://localhost:8443/authentication_token' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

因此，经过一些搜索，我安装了
nelmio包
来处理cors，下面是我的
nelmio_cors.yml
文件：

nelmio_cors:
    defaults:
        allow_credentials: true
        allow_origin: ['*']
        allow_methods: [ 'GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE' ]
        allow_headers: [ '*' ]
        expose_headers: [ 'Authorization']
        max_age: 0
        hosts: []
        origin_regex: true
        forced_allow_origin_value: ~
    paths:
        '^/':
            origin_regex: true
            allow_origin: ['*']
            allow_headers: [ '*' ]
            allow_methods: [ 'POST', 'PUT', 'PATCH', 'GET', 'DELETE' ]
            expose_headers: [ 'Link' ]
            max_age: 3600

并在my
.env
中添加了以下行：

###> nelmio/cors-bundle ###
CORS_ALLOW_ORIGIN=(.*)
###< nelmio/cors-bundle ###

看来你找不到路线了。知道为什么吗

更新2
我的
nelmio_cors.yaml
文件现在看起来如下所示：

nelmio_cors:
    paths:
        '^/':
            origin_regex: true
            allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'PATCH', 'GET', 'DELETE']
            max_age: 3600

.env
包含：

CORS_ALLOW_ORIGIN=(.*)

但在路由呼叫中，我收到以下错误：

Access to fetch at 'https://localhost:8443/authentication_token' from origin 'http://localhost:3001' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

我的回复标题

access-control-allow-origin: http://localhost:3001
cache-control: no-cache, private
content-encoding: gzip
content-length: 451
content-type: application/json
date: Thu, 22 Oct 2020 08:12:11 GMT
server: openresty/1.17.8.2
status: 404
vary: Accept-Encoding
vary: Accept
x-debug-exception: Unable%20to%20find%20the%20controller%20for%20path%20%22%2Fauthentication_token%22.%20The%20route%20is%20wrongly%20configured.
x-debug-exception-file: %2Fsrv%2Fapi%2Fvendor%2Fsymfony%2Fhttp-kernel%2FHttpKernel.php:141
x-debug-token: 9b2891
x-debug-token-link: https://localhost:8443/_profiler/9b2891
x-powered-by: PHP/7.4.11
x-previous-debug-token: 486328
x-robots-tag: noindex

请求标题
：

:authority: localhost:8443
:method: POST
:path: /authentication_token
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
content-length: 248
content-type: multipart/form-data; boundary=----WebKitFormBoundarywFASHmBarrNFyL7Y
cookie: pma_lang=fr; phpMyAdmin=a18f394d8e7daaefba20691da57c4b58; io=Jh7QElIlIXLDeAYaAAAA
origin: http://localhost:3001
referer: http://localhost:3001/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.99 Safari/537.36

我建议为本地开发和您的生产或非生产环境设置不同的环境变量值

nelmio_cors:
    paths:
        '^/':
            origin_regex: true
            allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'PATCH', 'GET', 'DELETE']
            max_age: 3600

对于本地开发，您可能有以下环境

CORS_ALLOW_ORIGIN=(.*)

对于prod/non-prod，为了安全起见，您可能希望明确列出您的web应用程序域

CORS_ALLOW_ORIGIN=^https://(www\.)?(site.domain.com|site2.domain.com)$

对于那些有同样问题的人来说，问题来自前端

我恢复的数据并放在身体中：


const response = await fetch(
                'https://localhost:8443/authentication_token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',  
                },
                body: data
            })

格式不好，并且由于某种原因后端发回了奇怪的错误

所以我对它们进行了硬编码，最后的结果是：

const data = "{\"email\":\"test@test.com\",\"password\":\"test\"}";
            const response = await fetch(
                'https://localhost:8443/authentication_token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',  
                },
                body: data
            })

我看不到您的配置中的任何地方都使用了env var（而且它看起来被破坏了，可能只是粘贴在这里）。您不应该将其添加到
允许源代码
数组中吗？另外，请参见。策略必须集成到响应系统中。对不起，我看不出是不是这样。谢谢！我已经更新了我的nelmio_cors和.env文件，以及我的帖子，但我仍然收到同样的问题。你知道其他的方法来解决这个问题吗？你使用了我发布的全部片段了吗？我可以在您的配置中看到“主机”的定义，这可能是问题的原因，因为您的本地主机没有“api”前缀。是的，我刚刚再次更新了我的帖子。是的，谢谢，我把它拿走了。现在我发现了一种新的错误，仍然与cors有关，很遗憾，好像react找不到路由，不明白为什么您的配置仍然与我的代码片段有很大的不同。它在一个非常相似的情况下对我有效，所以我看不出为什么它不适合你。请考虑使用它。并检查您的回复CORS标题，这可能有助于理解问题。我对我的帖子进行了另一次更新，以回答您的问题。也许我们的项目在docker实现方面有所不同（我在本期的顶部也对其进行了更新）。但我真的不知道这会对cors有什么影响
const data = "{\"email\":\"test@test.com\",\"password\":\"test\"}";
            const response = await fetch(
                'https://localhost:8443/authentication_token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',  
                },
                body: data
            })