Question

我们已经在窗口服务器上安装了一个 < 坚固> Laravel 10 - React JS 网络应用程序。

API is working, tried it on postman. Web pages for our front-end is also working, except when executing api. It is showing a cors error below:

在https://api.mydomain.com/sign-in的源头https://webap.mydomain.com上,访问XMLHtp请求被CORS政策封锁:对飞行前请求的答复没有通过出入控制检查:请求资源上没有存取-Control-Allow-Origin信头。

我确信我已经正确地配置了.env和cors.php, 启用了cors中继器件。另外, 它正在用本地主机: 8000 和当地主机: 30: 00 来处理本地环境。

有没有人有同样的问题?

这里的代码是:

<强度>cors.php

<?php

return [

     paths  => [ api/* ,  sanctum/csrf-cookie ,  sign-in ,  sign-out ],

     allowed_methods  => [ * ],

     allowed_origins  => [env( FRONTEND_URL ,  https://webapp.mydomain.com )],

     allowed_origins_patterns  => [],

     allowed_headers  => [ * ],

     exposed_headers  => [],

     max_age  => 0,

     supports_credentials  => true,

];

< 强度 > Laravel:.env

APP_URL=https://api.mydomain.com
FRONTEND_URL=https:/webapp.mydomain.com
SANCTUM_STATEFUL_DOMAINS=webapp.mydomain.com
SESSION_DOMAIN=mydomain.com

React: .env VITE_API_BASE_URL=https://api.mydomain.com

<强网.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>

   code here...

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="https://webapp.mydomain.com" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
                <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
    </httpProtocol>
    
  </system.webServer>

</configuration>

<强度 > axios-client.js

import axios from  axios ;
import csrfCookie from  ./csrf-cookie ;

const api = axios.create({
    baseURL: `${import.meta.env.VITE_API_BASE_URL}/api/v1`,
    withCredentials: true,
})

const web = axios.create({
    baseURL: `${import.meta.env.VITE_API_BASE_URL}`,
    withCredentials: true,
})

const apiBase = `${import.meta.env.VITE_API_BASE_URL}/api/v1`
const webBase = `${import.meta.env.VITE_API_BASE_URL}`

export { api, web, apiBase, webBase };

< 强势> Signin 代码

import { api, web } from "../axios-client"
import csrfCookie from "../csrf-cookie"

        await csrfCookie().catch(err => {
            code here...
        })

        await web.post( /sign-in , formData)
            .then(async ({ data }) => {
                code here...
            })
            .catch(err => {
                code here...
            })
    }

Answer 1

我尝试将我的自定义头从 Reacts s web. config 移动到 Laravel s web. config 。然而,这导致一个新的错误 :

Access-Control-Allow-Oligin头条包含多个值 https://webapp.mydomain.com, https://webapp.mydomain.com, 但只允许一个值。

  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="https://webapp.mydomain.com" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
            <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

当我从 Laravel s Web. config 中删除自定义页眉时, 它产生了一个“ 无法访问控制- Allow- Oligin ” 错误。添加它又导致多个页眉值错误。于是我试图从 Cors. php 中允许的源头中删除我的前端 URL, 最终解决了这个问题。

<强度>cors.php

 paths  => [ api/* ,  sanctum/csrf-cookie ,  sign-in ,  sign-out ],

 allowed_methods  => [ * ],

 allowed_origins  => [/*Removed frontend url here*/],

 allowed_origins_patterns  => [],

 allowed_headers  => [ * ],

 exposed_headers  => [],

 max_age  => 0,

 supports_credentials  => true,

友情链接