webpack 解決跨域問題及原理

本文轉載自查看原文 2020-02-19 19:40 1929 webpack

1.什么是跨域

2.那些是跨域請求

為什么前端存在跨域

如何解決

jsonp

簡單實現jsonp

后台node編寫 app.js文件

const http = require("http");
const fs = require("fs");
const url = require("url");
const path = require("path");
const querystring = require("querystring");
const server = http.createServer();
server.on("request", (req, res) => {
    let urlObj = url.parse(req.url, true); //把地址格式化成對象
    let query = urlObj.query;
    let pathname = urlObj.pathname;
    if (pathname == "/getData" && req.method == "GET") {
        var callback = query.callback;
        var obj = {
            "name": "jack",
            "age": 18
        }
        var obj_str = JSON.stringify(obj)
        res.end(callback + "(" + obj_str + ")"); //配合實現jsonp解決跨域
    }
})
server.listen(3000);

1.$.ajax實現

        $.ajax({
            type: "GET",
            url: "http://localhost:3000/getData",
            dataType: "jsonp",
            success: function (data) {
                console.log(data);
            }
        })

2.原生js 實現jsonp示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script>
        function aaaaaaaaaaaaaaaaaaaaaaaaaaa(data) {
            console.log(data); //data為獲取的數據
        }
    </script>
    <script>
        function addScriptJsonp(src) {
            var script = document.createElement("script");
            script.src = src;
            document.body.appendChild(script);
        }
        window.onload = function () {
            addScriptJsonp("http://localhost:3000/getData?callback=aaaaaaaaaaaaaaaaaaaaaaaaaaa")
        }
    </script>
</body>

</html>

隨手用原生js封裝個ajax , 用起來就方便多了

function myAjax(option) {
            let _option = {
                url: '',
                type: "GET",
                data: null,
                datatype: "",
                contentType: "application/json; charset=utf-8",
                success: function (response) {

                }
            }
            var opt = Object.assign({}, _option, option);
            var xhr = null;
            if (new XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP")
            }
            var url = '';
            if (opt.data) {
                url = Object.keys(opt.data).map(key => key + "=" + opt.data[key]).join("&");
            }
            if (opt.type.toUpperCase() == "JSONP") {
                createScript(opt.url, opt.data)
            } else {
                if (opt.type.toUpperCase() == "GET") {
                    xhr.open('GET', opt.url + "?" + url, true)
                    xhr.send()
                } else if (opt.type.toUpperCase() == "POST") {
                    xhr.open("POST", opt.url, true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send(url)
                }
            }

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // if (opt.dataType == 'JSON') {
                    opt.success(xhr.responseText)
                    // }
                }
            }
        }
 function createScript(url, data) {
            var script = document.createElement('script');
            script.src = url + "?" + data + "$callback=getEn";
            document.body.appendChild(script)
        }

cors

1.在node.js中，http協議如果不設置響應頭，中文的話在客戶端瀏覽器是會亂碼的

設置為 "*" ,允許所有地址跨域請求(不安全,不推薦)

當然也可以設置白名單

 res.setHeader('Access-Control-Allow-Origin', '*');

設置白名單

response.setHeader("Access-Control-Allow-Origin", "域名");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "content-type, x-requested-with");
            response.setHeader("Access-Control-Allow-Credentials", "true");

2.cors解決跨域

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue webpack配置解決跨域問題 Webpack Proxy工作原理？為什么能解決跨域? 解決跨域的問題 springboot解決跨域問題跨域什么是跨域及怎么解決跨域問題？什么是跨域？如何解決跨域問題什么是跨域？怎么解決跨域問題？什么是跨域？如何解決跨域問題 Nginx解決前端跨域問題，Nginx反向代理跨域原理 vue-webpack項目本地開發環境設置代理解決跨域問題