'http://localhost:3000' 已被 CORS 策略阻止：否 'Access-Control-Allow-Origin'

Question

Can you help me, i have a function problematic: http://localhost:3000 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 如果不透明的響應滿足您的需求，請將請求的模式設置為no-cors以獲取資源：

  handleSubmit = e => {
         e.preventDefault();
         const data={
             'username' : this.username,
             'password' : this.password
         }
         fetch(process.env.REACT_APP_API_URL+'/api/login', data,{
             method:"POST",
             headers:{
                 'accept': 'application/json',
                 'Access-Control-Allow-Origin': "*",
                 'content-type': 'application/x-www-form-urlencoded',
                 'Access-Control-Allow-Credentials': 'true',
             }
         })
             .then(r => r.json());
         }

但是url有問題，怎么解決？ 在此處輸入圖像描述

Answer 1

當您訪問的port與您正在使用的port不同時，您將無法訪問資源。

修復

正如@Freestyle09 所評論的，您需要在后端啟用 CORS 策略：

在 PHP 中：

header('Access-Control-Allow-Origin: *');

在 node.js（快遞）中：

• 從 npm 安裝cors package。

var express = require('express');
var cors = require('cors');
var app = express();

app.use(cors());

這應該將標頭設置為Access-Control-Allow-Origin: * ，如果要指定主機：

app.use(cors({
  origin: 'http://yourapp.com'
}))

從這個答案中閱讀更多信息：

• https://stackoverflow.com/a/7564919/11555297
• https://medium.com/zero-equals-false/using-cors-in-express-cac7e29b005b

Answer 2

謝謝大家的輸入和回答，這個問題已經解決，並且正在運行。

這個問題很簡單，我只是在pckage.json中添加

  "proxy":"http://127.0.0.1:8000",

我在 axios fatch 中使用

axios({
        url:'/api/login',
        data:data,
        method:"POST",
        mode: 'no-cors',
        headers:{
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": process.env.REACT_APP_API_URL,
            "Access-Control-Request-Headers": 'Content-Type, Authorization'

        }
    })
    .then(res => {
        console.log(res);
    })
    .catch(err =>{
        console.log(err);
    })

這對我有用 謝謝大家 (n_n)

Answer 3

在 spring 引導中，您可以使用注釋“@CrossOrigin”。 您將通過您的反應應用程序的 url 獲取參數來源：

@CrossOrigin(origins = "http://localhost:3000",methods = RequestMethod.GET)
@GetMapping("/courses")
public Iterable<Course> getCourses() {
    CourseService courseService=new CourseService();
    return courseService.getAllCourses();
}