Symfony 4 + React 应用程序中的 404 error/No Access-Control-Allow-Origin header 消息。如何使路由工作？

Question

我创建了一个简单的应用程序，想将它部署到服务器上。我是第一次经历这个——所以以前的经验我无法从中受益。

一般问题：

该应用程序已实现 React Router，但使用 Symfony 路由来调用数据库。因此，为了通过应用程序选项卡导航，React Router 发生了，为了获取 in/from 数据库，我打算使用 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

观察：

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

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

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

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

这似乎与第 1 点中引用的 CORS 政策信息不一致。

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

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

呼救：

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

Answer 1

您的配置在此行指向空值：

'^/': null

您需要像这样进行与您的路由和域相关的配置：如果是 symfony 4，请随意更改它并使用 .env 配置：

  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: ['*'] 将允许所有其他域请求资源，除非它是 public api 并且任何脚本都可以请求，否则不推荐这样做

Symfony 4 + React 应用程序中的 404 error/No Access-Control-Allow-Origin header 消息。如何使路由工作？

404 error/No Access-Control-Allow-Origin header message in Symfony 4 + React app. How to make the routing work?

reactjs

symfony

deployment

routing