ReactJS + PHP + Axios — как решить проблему Access-Control-Allow-Origin?

Question

[Narchist]

Добрый день, прошу помощи в решении проблемы с CORS и 'Access-Control-Allow-Origin'. Второй день ничего не получается!

Приложение на create-react-app

Я получаю данные из БД в PHP файле и перевожу их в JSON формат. Все хорошо. Получаю стандартный JSON

react.php

require($_SERVER['DOCUMENT_ROOT'] . '/wp-blog-header.php');

global $post;

$args = array(
    'numberposts' => '10',
    'offset' => '27',
    'post_type' => 'product',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'ASC'
);

$products = get_posts($args);


foreach ( $products as $product ) {
    $result = $products;
}

echo json_encode($result);

Данные в следующем формате JSON

[  
   {  
      "ID":3431,
 "post_title":"\u041a\u041e\u041d\u0426\u0415\u041d\u0422\u0420\u0410\u0422\u041e\u0420 8\u0424-1\/2",
      "guid":"http:\/\/domain.ru\/product\/koncentrator-8f-1-buk\/",
   },
]

В ReactJS получаю их с помощью axios.get();

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import axios from "axios";

import Product from "./Product";

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            result: []
        };
    }

    componentWillMount() {
        axios
            .get('http://example.com/wp-content/themes/armed/mobile/react.php')
            .then(({ data }) => {
                this.setState({
                    result: data
                });
            });
    }



    render() {
        return(
            <div className="products">
                {this.state.result.map((product, i) => (
                    <Product
                        key={i}
                        post_title={product.post_title}
                        guid={product.guid}
                    />
                ))}
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Product.js

import React from 'react';

const Product = ({post_title, guid}) => (
    <div>
        <div>{post_title}</div>
        <div>{guid}</div>
    </div>
);

export default Product;

И в итоге получаю ошибку в браузере

GET example.com/wp-content/themes/armed/mobile/react.php 404 (Not Found)

createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)

Очень много гуглил и читал.
Писал в package.json 'proxy' - не помогло
Указывал заголовок в PHP файле

header('Access-Control-Allow-Origin: *'); 
    header("Access-Control-Allow-Credentials: true");
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization');

Тоже не помогло

На локальном сервере через OpenServer не работает
На DevServer который запускает webpack тоже не работает
На реальном сервере тоже не работает

Понимаю, что проблемы к обращению к другом URL, на другом порте. Окей. Обычный JSON, txt на этом URL тоже не работает. Но, например вот этот https://5a523e6850dffb001256e0bf.mockapi.io/products - работает! И естественно, если закинуть файл прямо в папку приложения в 'src', то axios получает файл внутри приложения. Но мне очень необходимо получить файл по другому пути/адресу/url.

Как обойти эту проблему с запросом и CORS?
Может есть какие-то другие варианты получения JSON из PHP в React?

Comments

[hOtRush]

Причем тут CORS, если у вас 404? У cors другое сообщение об ошибке, что-то вроде

XMLHttpRequest cannot load http://local. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://local' is therefore not allowed access.

[hOtRush]

require($_SERVER['DOCUMENT_ROOT'] . '/wp-blog-header.php');

global $post;

$args = array(
    'numberposts' => '10',
    'offset' => '27',
    'post_type' => 'product',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'ASC'
);

$products = get_posts($args);


foreach ( $products as $product ) {
    $result = $products;
}

echo json_encode($result);

от этого вообще перетрясло

Answer 1

[Антон Спирин]

Почитайте любую свежую статью по REST API на PHP Так API никто не пишет:

.get('http://example.com/wp-content/themes/armed/mobile/react.php')

Для решения проблемы с cors, поставьте nginx и добавьте в hosts хост для вашего проекта, и напишите конфиг для nginx, по которому он будет по разным путям вашего хоста перенаправлять запросы на разные порты.
hosts:
127.0.0.1 project
nginx.conf:

server {
  listen 80;
  server_name project;

  location ^~ / {
    proxy_pass http://localhost:3000/;
  }
  location ^~ /api/ {
    proxy_pass http://localhost:3001/api/;
  }
}