什么是跨域

• 客戶端地址與數(shù)據(jù)服務器地址，只要協(xié)議、域名、端口號中的一個不一樣，那就是跨域
• 跨域是瀏覽器的安全機制引起的

JSONP

• 利用<script> （或者<link>、<img>）等不存在跨域限制的標簽

• 缺點：只支持get請求

• 過程：

  • 在客戶端定義好全局函數(shù)fn后，通過script標簽 -> <script scr='http://127.0.0.1:8888/user/list?callback=fn'> 發(fā)送請求，即把fn當做參數(shù)發(fā)送給服務器

  • 服務器端接受到這個請求，同時也可以獲取callback傳遞的值（這個callback名字要前后臺一起協(xié)商），即fn，服務器端把參數(shù)準備好，返回給客戶端 - > "fn([...params] b )"

  • 客戶端獲取到fn([...params])，即讓瀏覽器把fn執(zhí)行，然后把...params當做參數(shù)傳遞給fn

• 百度的搜索就是通過JSONP來做的

CROS

• 服務器允許當前客戶端發(fā)請求
• CROS并不需要前端做什么特別的操作
• ALLOW_ORIGIN 的設置只允許單一源或者* ，因此 ， 我們可以通過設置白名單來指定域名地址，動態(tài)獲取地址后與白名單比較再添加到ALLOW_ORIGIN中
• 下面是node(express)中如何設置CROS

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();
});

proxy

• proxy的原理即弄一個代理服務器：
  • 后臺和后臺之間，除非設置了黑名單，否則是不存在跨域一說的，跨域是瀏覽器（即客戶端）的安全性引起的
  • 因此 ，只要保證我們自己起的代理服務器和客戶端同源即可，請求數(shù)據(jù)可通過代理服務器去做

我們前端可以通過webpack的dev-server插件創(chuàng)建代理服務

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`
        })
    ]
};

Vue-cli中已經(jīng)幫助我們配置好webpack了，我們只需要建立一個vue.config.js文件寫以下代碼即可

module.exports = {
    devServer: {
        proxy: "https://..."
    }
};

服務器真實上線的時候，可以通過nginx設置反向代理

• 因此我們可以本地開發(fā)的時候 在vue/react中可以通過dev-server實現(xiàn)跨域代理，部署上線的時候，通過nginx做代理