对glitch.me服务器的跨域请求[重复]答案

【问题标题】：Cross-origin request to glitch.me server [duplicate]对glitch.me服务器的跨域请求[重复]
【发布时间】：2019-10-01 18:41:04
【问题描述】：

我在 glitch.me 上创建了一个服务器，我正在尝试从服务器提供数据，但出现以下错误。 localhost/:1 从源 'http://localhost:3000' 获取 'https://clem-quote-server.glitch.me/quotes' 的访问权限已被 CORS 策略阻止：

请求中没有“Access-Control-Allow-Origin”标头资源。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

不太清楚如何解决这个问题

import React, {Component} from "react"

class quotes extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            quotes: quotes
        };
    }

componentDidMount() {
    fetch("https://clem-quote-server.glitch.me/quotes")
      .then(res => res.json())
      .then(
        (result) => {
            this.setState({
            isLoaded: true,
              quotes: result.quotes
          });
        },
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
}

    render() {
        const { error, isLoaded, quotes } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
            return <div>Loading...</div>;
        } else {
            return (
              <ul>
                {quotes.map(quote => {
                    return quote;

                }  
                )}
              </ul>
            );
        }
    }
}       
    export default quotes;

我希望能够在每次页面加载时显示数组列表中的一个对象

【问题讨论】：

见stackoverflow.com/a/38500226/441757和stackoverflow.com/questions/7067966/how-to-allow-cors的其他答案

标签： node.js cors glitch-framework

【解决方案1】：

由于 CORS 导致失败，当服务器和客户端处理不同的域时必须包含 CORS。

CORS 包含在标题中。

以下是在你的 react 应用中启用 corse 的方法：

https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

CORS 信息：

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：