Symfony 4 + React应用程序中的404错误/ No Access-Control-Allow-Origin标头消息。如何进行路由工作？

Question

我已经创建了简单的应用程序，并希望将其部署在服务器上。我是第一次进行此操作-因此以前的经验都无法从中受益。

一般问题：

该应用程序已实现React Router，但使用Symfony路由来往数据库的呼叫。因此，为了浏览应用程序选项卡，发生了React Router，用于从打算使用Symfony路由的数据库中提取数据。

当我在本地服务器上时，一切正常。但是，当我手动将文件拖放到服务器上时，应用程序在获取请求时中断。

反应组件代码：

 let targetUrl = `http://serverAddress.nazwa.pl/save`;

 let request = new Request(targetUrl, {
        body: formData,
        method: "POST",
        headers: {
            "Access-Control-Request-Method": "POST, GET, OPTIONS",
            "Origin": "http://mySimpleAppDomain.com.pl",
        }
    })
    fetch(request)
        .then((response) => response.json())

        .then((response) => {

            this.setState({
                isListActive: false,
                currentItems: [],
                currentItemsCounter: 0
            })
            document.getElementById("defNavEl").classList.add("default")
        })
        .catch((error) => {
            console.error('SAVE TO DB FETCH ERROR:', error);
        });

Symfony控制器代码：

**
 * @Route("/save", name="save")
 */
public function save(Request $request)
{
    $shoppingList = new ShoppingList();
    $list = $request->request->all();

    if (count($list) > 0) {
        $em = $this->getDoctrine()->getManager();
        $shoppingList->setCreationDate(new \DateTime());
        $shoppingList->setName($list['name']);
        unset($list['name']);
        $shoppingList->setListItems($list);

        $em->persist($shoppingList);
        $em->flush();
        $results = $em->getRepository(ShoppingList::class)->listAllShoppingLists();
        $response = $this->json($results);

        $response->headers->set('Access-Control-Allow-Origin', 'https://localhost:8006');
        $response->headers->set('Content-Type', 'application/json');


        return $response;
    } else {
        return new Response();
    }
}

Nelmio CORS捆绑软件配置：

nelmio_cors:
defaults:
    allow_credentials: false
    allow_origin: []
    allow_headers: []
    allow_methods: []
    expose_headers: []
    max_age: 0
    hosts: []
    origin_regex: false
    forced_allow_origin_value: ~
paths:
    '^/': null
        origin_regex: false
        allow_origin: ['*']
        allow_methods: ['*']
        allow_headers: ['*']
        expose_headers: ['Link']
        max_age: 3600

观察：

1. [当我尝试将数据提取到数据库时，我在控制台中收到以下消息：

从原点'http://example.nazwa.pl/save'到'http://myappname.com.pl'的提取访问已被CORS策略阻止：所请求的资源上没有'Access-Control-Allow-Origin'标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

尽管我在旨在处理请求的操作中设置了“ Access-Control-Allow-Origin”标头，但仍会发生这种情况。

2. [当我通过邮递员在http://serverAddress.nazwa.pl/save上发送一些测试请求时，出现404错误。

这似乎与第1点中引用的CORS政策信息相矛盾。

我尝试过的（以及其他）：

我试图重组控制器，以便只有一个动作负责不同的请求。但神秘的是，它没有用。就良好做法而言，这似乎也不是一个好主意。

呼救：

我暂时没有主意。也许是带有.htaccess配置的东西（我已经安装了Apache Pack，它已经生成了它）。我将不胜感激任何可以帮助我前进的建议或想法。

Answer 1

您的配置在此行指向null：

'^/': null

您需要具有与您的路由和域相关的配置，如下所示：如果它是symfony 4，请随意更改它，并使用.env config：

  nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600
    paths:  
        '^/save' :
          allow_origin:
            - '^http://serverAddress.nazwa.pl/'
            - '^http://localhost:[0-9]+'
            - '^http://serverAddress.nazwa.pl/save'
          #allow_origin: ['*']
          allow_credentials: true
          allow_headers: ['Authorization', 'X-Requested-With', 'content-type','Content-Type', 'Accept', 'Origin', 'X-Custom-Auth']
          allow_methods: ['POST', 'PUT', 'GET', 'DELETE','PATCH','OPTIONS']
          max_age: 3600
        '^/': null

Paths数组将采用路由并从上方应用默认配置，然后将其与特定于路由的配置合并，以便为定义的每个路由获取准确的配置。此示例默认使用所有其他路由来阻止cors请求，但/ save路由除外，这将允许在数组中定义域或路径。

注意：allow_origin: ['*']将允许所有其他域请求资源，除非它是公共api并且任何脚本都可以请求，否则不建议使用该资源。