ReactJS API数据获取CORS错误(ReactJS API Data Fetching CORS error)

 我一直试图为我的实习创建一个反应web应用程序几天，我遇到了CORS错误。 我正在使用最新版本的reactJS，并将其放在create-react-app ，下面是获取的代码： 
 
componentDidMount() {
  fetch('--------------------------------------------',{
    method: "GET",
    headers: {
      "access-control-allow-origin" : "*",
      "Content-type": "application/json; charset=UTF-8"
    }})
  .then(results => results.json())
  .then(info => {
    const results = info.data.map(x => {
      return {
        id: x.id,
        slug: x.slug,
        name: x.name,
        address_1: x.address_1,
        address_2: x.address_2,
        city: x.city,
        state: x.state,
        postal_code: x.postal_code,
        country_code: x.country_code,
        phone_number: x.phone_number,
      }
    })
    this.setState({warehouses: results, lastPage: info.last_page});
  })
  .then(console.log(this.state.warehouses))
 }
 
 很抱歉，由于公司规则，我无法发布API的网址，但是，确认API后端没有CORS设置。 
 
 但是，在mozilla上运行时遇到以下错误 
 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
 
 和 
 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).
 
 如果在chrome上运行，则会出现以下错误 
 
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
 
 和 
 
Failed to load --------------------------------------------------------: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 
 和 
 
Uncaught (in promise) TypeError: Failed to fetch
 
 另一件事是我可以在我的浏览器中打开网址，没有任何问题或任何问题。 
 
 请帮助和谢谢！ 
 
 附加信息 
 
 我添加CORS设置的原因是因为它提供了CORS错误，因此删除它并不能真正解决问题。 
 
 接下来我尝试执行代理设置，但现在它给出了 
 
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
 
 根据互联网，这是因为响应不是JSON。 但是，当我检查API时，它给出了这个 
 
 api img 
 
 这意味着返回类型应该是JSON吗？ 
 
 附加信息 
 
 检查响应将产生这一点 
 
 { “状态”：200， “总”：1， “per_page”：3 “CURRENT_PAGE”：1， “last_page”：1， “next_page_url”：NULL， “prev_page_url”：空 “从” 1” to“：3，”data“：[{”id“：1，”slug“：”america“，”name“：”america“，”address_1“：”USA Court“，”address_2“：”USA“， “城市”： “USA”， “状态”： “USA”， “POSTAL_CODE”： “94545”， “COUNTRY_CODE”： “美国”， “PHONE_NUMBER”： “10000001”， “CREATED_BY”：空， “updated_by”： null，“created_at”：“2017-11-10 11：30：50 + 00”，“updated_at”：“2018-06-28 07：27：55 + 00”}}} 

I've been trying to create a react web app for a few days now for my internship and I've encountered a CORS error. I am using the latest version of reactJS, and placing this in the create-react-app, and below is the code for fetching:
 
componentDidMount() {
  fetch('--------------------------------------------',{
    method: "GET",
    headers: {
      "access-control-allow-origin" : "*",
      "Content-type": "application/json; charset=UTF-8"
    }})
  .then(results => results.json())
  .then(info => {
    const results = info.data.map(x => {
      return {
        id: x.id,
        slug: x.slug,
        name: x.name,
        address_1: x.address_1,
        address_2: x.address_2,
        city: x.city,
        state: x.state,
        postal_code: x.postal_code,
        country_code: x.country_code,
        phone_number: x.phone_number,
      }
    })
    this.setState({warehouses: results, lastPage: info.last_page});
  })
  .then(console.log(this.state.warehouses))
 }
 
I'm sorry that I can't post the url for the API due to company rules, however, it is confirmed that there are no CORS setting in the API backend.
 
However, I encounter the following errors when run on mozilla
 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
 
and
 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).
 
If run on chrome it gives the following error
 
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
 
and 
 
Failed to load --------------------------------------------------------: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 
and 
 
Uncaught (in promise) TypeError: Failed to fetch
 
Another thing is that I am able to open the url in my browsers with no problems or whatsoever.
 
Please help and thanks!
 
Additional Information
 
The reason I added the CORS setting is because it gives a CORS error, so removing it does not really solve the issue. 
 
Next I tried to perform proxy setting, however, it now gives 
 
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
 
According to the internet this is caused becasue the response is not a JSON. However when I checked the API it gives this
 
api img
 
which means that return type should be a JSON right?
 
Additional Info
 
checking the respond will yield this
 
{"status":200,"total":1,"per_page":3,"current_page":1,"last_page":1,"next_page_url":null,"prev_page_url":null,"from":1,"to":3,"data":[{"id":1,"slug":"america","name":"america","address_1":"USA Court","address_2":"USA","city":"USA","state":"USA","postal_code":"94545","country_code":"US","phone_number":"10000001","created_by":null,"updated_by":null,"created_at":"2017-11-10 11:30:50+00","updated_at":"2018-06-28 07:27:55+00"}]}

原文：https://stackoverflow.com/questions/51128176