Node.js &引用；加载资源失败：服务器响应状态为404（未找到）"+&引用；原产地…；访问控制允许源站不允许；

我正在创建一个带有“create react app”、express、cors和mysql的react应用程序，用户应在其中以表单形式输入一些详细信息，然后发送到数据库。所有现有条目都应显示在web应用程序上。 我在当地试过，一切都很好。数据库已填充，请求已在web应用程序上显示数据库条目

然后，我在一个“npm run build”命令后部署到我的web主机（all inkl.com）。现在，数据库条目没有显示，我也不能再填充数据库了。 Chrome开发工具和Safari检查员告诉我，这与CORS有关。经过一些研究，我知道，由于CORS策略（和SOP策略？），对db的请求应该来自同一个域。但我不知道如何修复它。 问题的关键在于数据库凭据不正确。就我而言，我非常肯定，这些凭证是正确的

在这个代码块上，Chrome抛出相应的错误

getBets = _ => {
    fetch("http://www.subdomain.example.de/bets")
        .then(response => response.json())
        .then(response => this.setState({bets: response.data}))
        .catch(err => console.error(err))
  };

Chrome开发工具错误： 加载资源失败：服务器响应状态为404（未找到）

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

TypeError:获取失败

Safari Inspector错误： 访问控制不允许原点允许原点

由于访问控制检查，无法加载获取API

加载资源失败：访问控制不允许原始站允许原始站

TypeError:访问控制不允许原点允许原点

因为我不知道代码的哪一部分包含问题，所以整个代码如下

server.js App.js

---

XHR状态是否意味着CORS正在运行并且没有任何错误？

您可以尝试在

获取

请求中启用CORS，因为默认情况下它未启用：

getBets = _ => {
    fetch("http://www.subdomain.example.de/bets", { mode: 'cors' })
        .then(response => response.json())
        .then(response => this.setState({bets: response.data}))
        .catch(err => console.error(err))
};

---

尝试在服务器端设置以下标头：

app.all（'/'，函数（req，res，next）{
res.header（“访问控制允许原点”、“*”）；
res.header（“访问控制允许标头”、“X请求的标头”）；
next（）；
});CORS问题几乎总是与服务器相关。我认为您应该修改您的问题，添加有关如何托管服务器的附加信息。乍一看，使用对我来说似乎是合法的。客户端代码无关紧要，最好为选项请求提供响应头。可能您的代码在某个地方失败，并且返回了选项的非200状态。加载资源失败：服务器响应的状态为404（未找到）@sideshowbarker，因此，server.js可能无法正常工作，不是吗？在本地，我使用nodemon启动server.js。在由all-inkl.com托管的服务器上，如果需要，我根本不知道哪个命令启动server.js。这就是问题所在吗？@technogeek1995好吧，那我就走对了。关于server.js文件，我将再次与他们联系。非常感谢你的帮助。如果他们无法解决这个问题，我将更改提供程序。我在express初始化之后将该代码片段添加到server.js中。但是没有成功。但现在有点不同了：GET net:：ERR_中止404（未找到）我添加了代码以启用CORS，但没有成功。还是一样的错误。
import React, { Component } from "react";
import './App.css';

class App extends Component {

  state = {
    tests: [],
    test: {
      person_name: "Peter Pan",
      time: "10:17 Uhr"
    }
  };

  componentDidMount() {
    this.getTest();
  }

  getTests = _ => {
    fetch("http://www.subdomain.example.de/test")
        .then(response => response.json())
        .then(response => this.setState({tests: response.data}))
        .catch(err => console.error(err))
  };

  addTest = _ => {
    const { test } = this.state;

    fetch(`http://www.subdomain.example.de/tests/add?name=${test.person_name}&bet=${test.time}`)
        .then(response => response.json())
        .then(this.getTests)
        .catch(err => console.error(err))
  };

  renderBets = ({ test_id, name, test}) =>
      <div key={test_id}>
        <p>{name}</p>
        <p>{test}</p>
      </div>;

    render() {
    const { tests, test } = this.state;

        return (
            <div>
              {tests.map(this.renderTests)}
              <div>
                <input
                    value={test.person_name}
                    onChange={e => this.setState({test: { ...test, person_name: e.target.value}})}
                />
                <input
                    value={test.time}
                    onChange={e => this.setState({test: { ...test, time: e.target.value}})}
                />
                <button onClick={this.addTest}>Click Me</button>
              </div>
            </div>
        )
    }
}

export default App;


<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule> 

Fired XHR event: loadstart
Fired XHR event: readystatechange
Fired XHR event: progress
Fired XHR event: readystatechange
Fired XHR event: readystatechange
Fired XHR event: load
XHR status: 200
XHR status text: 
XHR exposed response headers:

cache-control: public, max-age=600
content-encoding: gzip
content-type: text/html
date: Fri, 02 Aug 2019 17:36:12 GMT
etag: "1rO4KQ"
expires: Fri, 02 Aug 2019 17:46:12 GMT
server: Google Frontend
x-cloud-trace-context: 2c0391d5a5e09665df3f0b243e2b90a6;o=1

getBets = _ => {
    fetch("http://www.subdomain.example.de/bets", { mode: 'cors' })
        .then(response => response.json())
        .then(response => this.setState({bets: response.data}))
        .catch(err => console.error(err))
};