前端开发的9种跨域解决方案

同源策略请求 ajax/fetch
非同源策略请求（跨域） 2013年前前后端不分离不存在跨域，
后来就需要异步无刷新操作ajax，部署的时候前后端代码还是放一个服务器上，这样开发时就有问题了，前后端都各起一个服务，很多公司就要求用同一个编译器
前端xampp启动一个服务，访问接口需要跨域，方法是修改host

跨域产生的原因和意义

服务器分离：WEB服务器、数据服务器、图片服务器…
云信息共享：第三方API接口
有助于分离开发：开发跨域、部署同源

# 1.JSONP

利用script不存在跨域限制，核心动态添加(动态创建一个script)，JQ把jsonp作为ajax的一种形式进行封装

let express = require('express'),
    app = express();
app.listen(8001, _ => {
    console.log('OK!');
});
app.get('/list', (req, res) => {
    let {
        callback = Function.prototype
    } = req.query;//{callback:func}
    let data = {
        code: 0,
        message: '珠峰培训'
    };
    res.send(`${callback}(${JSON.stringify(data)})`); //浏览器拿到后会自动执行
});

不安全
需要服务器支持
script本身就是下载资源的所以只支持get请求

# 2.CORS跨域资源共享

服务器端设置相关的头信息，需要处理options试探请求
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

简单请求

不会触发 CORS 预检请求，GET，HEAD，POST
预检请求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

详情见

module.exports = {
    //=>WEB服务端口号
    PORT: 3001,
    //=>CROS跨域相关信息
    CROS: {
        ALLOW_ORIGIN: 'http://127.0.0.1:5500',
        ALLOW_METHODS: 'PUT,POST,GET,DELETE,OPTIONS,HEAD', 
        HEADERS: 'Content-Type,Content-Length,Authorization, Accept,X-Requested-With',
        CREDENTIALS: true
    }
};

app.use((req, res, next) => {
    const {
        ALLOW_ORIGIN,
        CREDENTIALS,
        HEADERS,
        ALLOW_METHODS
    } = CONFIG.CROS;
    res.header("Access-Control-Allow-Origin", ALLOW_ORIGIN);
    res.header("Access-Control-Allow-Credentials", CREDENTIALS);
    res.header("Access-Control-Allow-Headers", HEADERS);
    res.header("Access-Control-Allow-Methods", ALLOW_METHODS);
    req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();
});

Access-Control-Allow-Origin只能写一个源或者 * ，一旦设置成* 以后发请求都不能携带cookie了
支持所有类型http

# 3. Proxy

webpack-dev-server起一个本地web服务通过设置proxy跨域
原理就是proxy代理中转是一个中间层，基于node实现

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: './src/main.js',
    output: {
        filename: 'main.[hash].min.js',
        path: path.resolve(__dirname, 'build')
    },
    devServer: {
        port: '3000',
        compress: true,
        open: true,
        hot: true,
        proxy: {
            '/': {
                target: 'http://127.0.0.1:3001',
                changeOrigin: true
            }
        }
    },
    // 配置WEBPACK的插件
    plugins: [
        new HtmlWebpackPlugin({
            template: `./public/index.html`,
            filename: `index.html`
        })
    ]
};

HEROES NEVER DIE

Choose mode

前端开发的9种跨域解决方案

前端开发的9种跨域解决方案

# 1.JSONP

# 2.CORS跨域资源共享

# 3. Proxy

# 4.nginx反向代理

# 5.Postmessage

# 6.WebSocket

# 7.iframe+ doucument.domain

# 8.iframe+ window.name

# 9.iframe+ location.hash