跨域解决方案

快问快答

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

    规定同一个协议、域名、端口为同域,非同域下你无法通过脚本获取 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——从理论到实践

它是什么?

有什么用?

影响有那些?

相应的疑问

参考资料

Last Updated:
Contributors: johan