为什么我只在回调函数中收到跨域错误？答案

【问题标题】：Why do I get a cross-domain error only in a callback function?为什么我只在回调函数中收到跨域错误？
【发布时间】：2019-05-09 17:10:05
【问题描述】：

我在 test.js 中有以下代码：

var symbol = "GOOG";
var Url = 'https://api.iextrading.com/1.0/stock/' + symbol + '/quote?filter=symbol,companyName,open,close,high,low,change,changePercent';
$.ajax({
    url: Url,
    type: "GET",
    success: function(result){
        console.log(result)
    },
    error: function(error) {
        alert("Error received:  " + error)
        console.log(`Error ${error}`)
    }
})

它运行良好，没有返回任何错误以及我想要的所有 JSON。但是......如果我把它放在一个回调中，例如，下面的代码，我会得到一个跨域错误。为什么会这样？

$(document).ready(function() {
    $('#btn').click(function() {
        const symbol = document.getElementById('symbol').value;
        var Url = 'https://api.iextrading.com/1.0/stock/' + symbol + '/quote?filter=symbol,companyName,open,close,high,low,change,changePercent';

        $.ajax({
            url: Url,
            type: "GET",
            success: function(result){
                console.log(result)
            },
            error: function(error) {
                alert("Error received:  " + error)
            }
        })
    })
})

【问题讨论】：

你能提供 id='symbol' 的 HTML 吗？我刚刚在 JSFiddle 上对其进行了测试，它可以工作。 Click here to test it。我得到了结果Object { symbol: "GOOG", companyName: "Alphabet Inc.", open: 1061.75, close: 1036.58, high: 1075.26, low: 1028.5, change: -32.15, changePercent: -0.03008 }
浏览器在 devtools 控制台中记录的确切错误消息是什么？
跨源请求被阻止：同源策略不允许读取位于api.iextrading.com/1.0/stock/GOOG/… 的远程资源。（原因：CORS 请求未成功）。[了解更多]
我无法重现该问题：jsfiddle.net/barmar/de753vtL/3 它适用于我的回调。
@MaryB。您使用的是哪个浏览器（和版本）？此外，值得尝试禁用所有浏览器插件/扩展，然后查看它是否有效。

标签： javascript callback cors xmlhttprequest cross-domain

【解决方案1】：

我发现了一个修复方法，它与冒泡有关。它不在我关注的任何地方（即在我的 javascript 文件中）。我仍然不明白为什么我会收到这个 CORS 错误。如果有人能说出一个理由，我一定会很感激的。

错误：
跨域请求被阻止：同源策略不允许读取位于https://api.iextrading.com/1.0/stock/aapl/quote?filter=symbol,companyName,open,close,high,low,change,changePercent 的远程资源。（原因：CORS 请求未成功）。

解决方法是删除我的“添加”按钮周围的表单元素：

<body>
    <h1 ><center>Stock Watcher</center></h1> 
    <div id="root">
        <div style="text-align: center;">
            <form>
                 <input id="symbol" type="text" placeholder="Enter stock symbol...">
                 <button id="btn">Add</button>
            </form>
        </div>      
    </div>
    <script src="js/httpRequest.js"></script>
</body>

【讨论】：