跨域的简单实现

利用flask启动后端服务器，前端是使用原生的js实现的。

只需要在后端响应头中增加 Access-Control-Allow-Origin 参数，如果想让所有的域都可以访问，那值设为 “*”就行。

后端代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!', 200, [
        ("Access-Control-Allow-Origin", "*")
    ]

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

前端代码：
`

<title>Ajax starting point</title>

<style>
    html,
    pre {
        font-family: sans-serif;
    }

    body {
        width: 500px;
        margin: 0 auto;
        background-color: #ccc;
    }

    pre {
        line-height: 1.5;
        letter-spacing: 0.05rem;
        padding: 1rem;
        background-color: white;
    }

    label {
        width: 200px;
        margin-right: 33px;
    }

    select {
        width: 350px;
        padding: 5px;
    }
</style>
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->

Ajax starting point

<form>
    <label for="verse-choose">Choose a verse</label>
    <select id="verse-choose" name="verse-choose">
        <option>Verse 1</option>
        <option>Verse 2</option>
        <option>Verse 3</option>
        <option>Verse 4</option>
    </select>
</form>

<h2>The Conqueror Worm, <em>Edgar Allen Poe, 1843</em></h2>

<pre>

</pre>

<script>
    const verseChoose = document.querySelector('select');
    const poemDisplay = document.querySelector('pre');

    verseChoose.onchange = function () {
        const verse = verseChoose.value;
        updateDisplay(verse);
    };

    function updateDisplay(verse) {
        // verse = verse.replace(" ", "");
        // verse = verse.toLowerCase();
        // let url = verse + '.txt';
        let url = 'http://127.0.0.1:5000/';

        fetch(url, { }).then(function (response) {
            response.text().then(function (text) {
                poemDisplay.textContent = text;
            });
        });
    }

    updateDisplay('Verse 1');
    verseChoose.value = 'Verse 1';

</script>

`