Question

这是我的代码段：

const url = util.API + '/ip/ip2addr' + `?ip=${this.state.ip}&key=${util.appKey}`;

 fetch(url, {mode: 'no-cors'}).then(res => res.json()).then(data => {
     //does not call this callback
     this.setState({res: data.result});
 }).catch(err => {

 });

我看到了响应，但没有调用promise.then方法，为什么？我怎样才能获得响应数据？

似乎第三方api不支持CORS，因此，我认为是编写节点服务器。

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded(extended: true)); 

app.get('/ip/ip2addr', (req, res) => {
    const url = util.API + '/ip/ip2addr' + `?ip=${ip}&key=${appKey}`;

    request
    .get({url}, (err, response, body) => {
        if (!err && response.statusCode == 200) {
            res.json(body);
        }
    })

}）;

app.listen(port, err => {
    if(err) throw err;
    console.log(`Server is listen on port ${port}`);
});

在搜索并阅读了一些文章后，我认为webpack-dev-server代理设置也可以解决这个问题。

Answer 1

MDN解释了为什么您的代码无效：

no-cors - 防止该方法不是HEAD，GET或POST。如果任何ServiceWorkers拦截这些请求，他们可能不会添加或覆盖除这些之外的任何标头。 此外，JavaScript可能无法访问生成的响应的任何属性。这可确保ServiceWorkers不会影响Web的语义，并防止因跨域泄漏数据而导致的安全和隐私问题。

基本上，no-cors请求导致 opaque 响应，而JavaScript代码无法读取。您已被允许提出请求，但您仍然无法发布CORS。

虽然您无法从这些回复中读取，但no-cors的一个用例是服务工作者，它可能会拦截来拦截来自不同来源的请求（例如，当<img />加载时），例如，用于缓存。（Jake Archibald解释了一下这个here）

`fetch`，使用模式`no-cors`不会调用promise.then回调

1 个答案: