Reactjs 404 Symfony 4+；中的错误/无访问控制允许原始报头消息；反应应用程序。如何使路由工作？

我已经创建了一个简单的应用程序，并希望将其部署到服务器上。这是我第一次经历，所以以前的经历对我没有好处

一般问题：

该应用程序已经实现了React路由器，但使用Symfony路由来处理进出数据库的呼叫。因此，为了在应用程序选项卡中导航，需要使用React Router，以便从打算使用Symfony路由的DB I中获取信息

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

反应组件代码：

 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);
        });

**
 * @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:
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

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);
        });

**
 * @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:
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

Nelmio CORS捆绑包配置：

 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);
        });

**
 * @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:
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

观察结果：

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

CORS策略已阻止从源“”获取“”的访问：请求的资源上不存在“访问控制允许源”标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

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

当我通过邮递员发送一些测试请求时，我得到404错误

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

我尝试过的（包括其他）：

 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);
        });

**
 * @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:
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

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

呼叫帮助：

 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);
        });

**
 * @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:
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

---

我现在没有主意了。也许是.htaccess配置的问题（我已经安装了Apache Pack，它生成了它）。我将感谢任何能帮助我前进的建议或想法

您的配置在此行指向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 route除外，该路由将允许在数组中定义域或路径

---

注意：

allow_origin:['*']

将允许从所有其他域请求资源，除非它是公共api且任何脚本都可以请求它，否则不推荐使用该资源。

感谢@Maulik花时间审阅！它很好地解释了如何首先应用默认值，然后将它们与特定的路径需求合并。但我将此更改应用于我的代码，但不幸的是，它返回相同的CORS消息。如果（至少在理论上）nelmio处理了，我是否仍然需要在控制器中设置access control allow origin头？我也知道在这种情况下，不会使用.env常量，因为它应该被/save路由的路径覆盖？对于env变量，您是正确的，您是否尝试过清理缓存？生产环境更不愿意在第一次通过时反映更改，而且浏览器可能需要发出新的请求，请尝试不同的浏览器。我已通过更改应用程序中目录的设置来解决问题，这样就不会发生cors。我认为这首先是问题所在。无论如何，非常感谢你的支持。我真的很感激。