允许使用 Flask 和 React 进行 CORS 请求

Question

我正在尝试通过ajax请求将客户端与服务器连接。

我的客户端在 上运行localhost:8080，有一个按钮调用一个函数，该函数ajax对本地运行的服务器localhost:5000.

点击功能：

  handleClick() {
console.log("check flights button was clicked!");
console.log(this.state);
const baseUrl = 'localhost:5000'
ajax.get(`${baseUrl}/flights/${this.state.origin}_${this.state.destination}`)
.end((error, response) => {
  if (!error && response) {
    console.log('got a valid response from the server')
  } else {
    console.log(`Error fetching data from the server: `, error)
  }
});}

使用 实现的（非常）简单的服务器Flask如下：

from flask import Flask, request
from flask_restful import Resource, Api
from json import dumps

app = Flask(__name__)
api = Api(app)

class Flights(Resource):
    def get(self, origin, destination):
    answer = 'we got some data ' + origin + ' ' + destination
    print answer

api.add_resource(Flights, '/flights/<string:origin>_<string:destination>')

if __name__ == '__main__':
    app.run()

如果我只是去localhost:5000/flights/origin_destination，我可以访问服务器，它会打印一条消息，说它收到了来源和目的地。但是，当我尝试执行ajax请求时，出现以下错误：

XMLHttpRequest cannot load localhost:5000/flights/Porto_Lisboa. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

关于如何纠正这种行为的任何建议？先感谢您。

Answer 1

正如错误所暗示的那样，您在请求中缺少协议名称。尝试将其添加到字符串的开头：

const baseUrl = 'http://localhost:5000'

而不仅仅是 localhost:5000