访问获取AT＆＃x27; http：// localhost/drupal/webform_rest/submit？_format = json＆＃x27;从原点＆＃x27; http：// localhost：8000＆＃x27; CORS政策已阻止

Question

我正在建立一个房地产网站，将gatsby作为前端和Drupal 9作为后端建立。

我已经在Gatsby网站上与我们联系，我希望将详细信息发送到Drupal WebForm REST，以保存用户的详细信息，例如名称，电子邮件和移动设备。

GET和POST请求在Postmen应用中正常工作，但是当填写我的联系我们的详细信息时，请单击“提交”提交给我以下错误。

这是盖茨比联系我们表单代码： -

    import React from 'react'
import '../css/Style.css';

const Contactus = () => {
  function handleSubmit(event){
    event.preventDefault();
    console.log(event);
    const name = event.target.name.value;
    const email = event.target.email.value;
    const mobile = event.target.mobile.value;
    console.log(name);
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Access-Control-Allow-Origin", "*");
    var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
      };
    myHeaders.append("X-CSRF-Token", "AHIK9FOi8FZscSQURECT6CfCCRgUcm0nNiaDxnvnEus");
//  myHeaders.append("Cookie", "SESS29af1facda0a866a687d5055f2fade2c=NsWpmKXyQRxGanB5%2CNEy7hpTY7nFc8xcTdLp100Zf2PiLCMx");
    var raw = JSON.stringify({
      "webform_id": "contact",
      "entity_type": null,
      "entity_id": null,
      "in_draft": false,
      "uri": [
        "/webform/webform_id/api"
      ],
      "name": name,
      "email": email,
      "mobile": mobile
    });
    
    var requestOptions2 = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };
    
    fetch("http://localhost/drupal/webform_rest/submit?_format=json",requestOptions2)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));
  }
  return (
    <>
                <div className='contactus'>
                    <div className='contactusInfo'>
                        <h3>For Any Query</h3>
                        <span>CONTACT US AT</span>
                        <h3>Sunteck World,</h3>
                        <h3>Sunteck world, Naigaon East, Mumbai, Maharashtra 401208,</h3>
                        <h3>Phone : +91 9702020907,</h3>
                    </div>
                    <form className='contactusform' onSubmit={handleSubmit}>
                            <h2>Please Enter Your Details Below</h2>
                            <div className='inputArea'>
                                <input type='text' name='name' placeholder='Enter Your Name' className='inputName' />
                                <input type='phone' name='mobile' placeholder='Enter Your Mobile Number' className='inputMobile' />
                                <input type='email' name='email' placeholder='Enter Your Email' className='inputEmail' />
                                <button type='submit' className='submit-btn'>Submit</button>
                            </div>
                    </form>
                </div>
            </>
  )
}

export default Contactus

在Drupal上，我正在使用Web表单：

访问'http：// localhost/drupal/webform_rest/submit？_format = json'from Oncount'http：// localhost：8000'已被CORS策略阻止访问控制检查：未请求的资源上没有“访问控制”标头。如果不透明的响应满足您的需求，请将请求模式设置为“无库”，以通过禁用CORS来获取资源。

我试图在Drupal 9 Services.yml文件中进行更改，但是它不起作用，

cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['access-control-allow-origin','content-type']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['POST']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['http://localhost:8000']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

任何人可以帮助我解决此错误吗？谢谢你！