Access to XMLHttpRequest at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Access to XMLHttpRequest at 'http://localhost:5000/login' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Получил данную ошибку после теста запроса, помогите, пожалуйста, с решением проблемы.

import React, { Component } from 'react'
import axios from 'axios';

export default class ApiRequest extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      posts: [],
    }
  }

  componentDidMount() {
    axios.get('http://localhost:5000/login')
      .then(response => {
        this.setState({ posts: response.data })
        console.log(response.data)
      })
  }

  render() {
    const { posts } = this.state
    return (
      <div>
        {posts.map(post => <div key={post.id}>{post.title}</div>)}
      </div>
    )
  }
}

Видел что подобные проблемы решаются добавление строки на свой второй сервер, но не нашёл какой и где. Сервер node.js

Answer 1

В коде, после того как мы пропишем const app = require('express'), добавить следующие строки:(Работает следующий код только в Node.js, порт 3000 для сервера react)

const cors = require('cors')
app.use(cors({
  origin: ['http://localhost:3000', 'http://127.0.0.1:3000'],
  credentials: true
}));
app.use(function (req, res, next) {

  res.header('Access-Control-Allow-Origin', "http://localhost:3000");
  res.header('Access-Control-Allow-Headers', true);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  next();
});

БЛОГ НА HUSL

Access to XMLHttpRequest at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Ответы (1 шт):