http请求跨域问题分析

http请求跨域问题分析

个人认为可能涉及很多http的知识,本人才疏学浅不敢妄自揣测,只是做个笔记为了以后对比理解,从原生fetch说起吧,前提假设有个后端服务,我用express来模拟,如下:

var express = require('express');
var app = express();

app.get('/stduy-cors', (req, res) => {
    res.status(200).json({
        hello: true,
        world: false
    });
});

app.listen(5555);

上面是服务端代码,假设前端服务在3000端口,我们在上面的代码下可以这样调用:

fetch('http://localhost:5555/cors', {
    mode: 'no-cors'
}).then(res => {
    console.log(res.type); //opaque
    // 此时无法转为json,因为这种type下无法读取响应内容
    return res.json(); // 报错
});

注意你不能用js拿到响应内容,但是可以用谷歌浏览器控制台查看。

常见解决方案

  1. 做一层中间层,服务端调服务端是没有跨域的,可以用node或ngix做中间层转发,这种方案比较常见。
  2. 服务端修改响应头,客户端修改请求头。
var express = require('express');
var app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', 'http://your-ip:your-port');
    next();
});

app.get('/stduy-cors', (req, res) => {
    res.status(200).json({
        hello: true,
        world: false
    });
});

app.listen(5555);

客户端如下调用接口:

fetch('http://localhost:5555/cors', {
    mode: 'cors'
}).then(res => {
    return res.json(); // 正确
}).then(res => {
    console.log(res);
});

客户端传入mode: 'cors', 服务端加上Access-Control-Allow-Credentials为true, 和Access-Control-Allow-Origin为你的ip+端口, 后者不能为通配符*, 想必这是处于安全策略, 暂时就写到这,后面再补。

posted @ 2018-11-30 21:59  xvivx  阅读(608)  评论(0编辑  收藏  举报