跨域解决方案

快问快答

• 同源策略的原理，为什么要有这个东西

  规定同一个协议、域名、端口为同域，非同域下你无法通过脚本获取 cookie，也无法发送 ajax。主要是为了信息安全，防止自己网站的信息数据被窃取。 请求获取其他域下的资源。

• 如何跨过同源策略的限制

  像一些静态资源加载引用是没有同源策略的，比如 img，css，script。

  ajax 跨域的主要方法是： jsonp 和 cors（服务端去允许跨域访问）

• 说一下 jsonp 的原理

  就是利用了 script 标签不受同源策略的限制，传给后端的 query /a?callback=foo，response 里为 foo({ a: 'b'})，前端直接执行 foo 就可以拿到注入的数据了。

解决跨域的几种方式

• 服务器端使用 CORS 模块

• JSONP

• Nginx 代理服务器配置跨域

因为 web 端能看源码

所以为了限制，有同源策略，只允许当前源（域名、协议、端口）一致的情况下才能请求

Node 端跨域

app.use('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*'); //这个表示任意域名都可以访问，这样写不能携带cookie了。
    //res.header('Access-Control-Allow-Origin', 'http://www.baidu.com'); //这样写，只有www.baidu.com 可以访问。
    res.header(
        'Access-Control-Allow-Headers',
        'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',
    );
    res.header(
        'Access-Control-Allow-Methods',
        'PUT, POST, GET, DELETE, OPTIONS',
    ); //设置方法
    if (req.method == 'OPTIONS') {
        res.send(200); // 意思是，在正常的请求之前，会发送一个验证，是否可以请求。
    } else {
        next();
    }
});

或者使用库 cors

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

var corsOptions = {
    origin: 'http://www.baidu.com', //只有百度可以访问
    optionsSuccessStatus: 200,
};

app.get('/products/:id', cors(corsOptions), function (req, res, next) {
    res.json({ msg: '只有百度可以访问' });
});

app.listen(80, function () {
    console.log('CORS-enabled web server listening on port 80');
});

JSONP——从理论到实践

它是什么？

有什么用？

影响有那些？

相应的疑问

参考资料

• 10 种跨域解决方案（附终极方案）