{"id":7525,"date":"2020-06-05T15:42:30","date_gmt":"2020-06-05T07:42:30","guid":{"rendered":"https:\/\/kyle.ai\/blog\/?p=7525"},"modified":"2020-06-05T15:42:30","modified_gmt":"2020-06-05T07:42:30","slug":"jsonp-%e5%92%8c-cors-%e4%b8%a4%e7%a7%8d%e8%b7%a8%e5%9f%9f%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/kyle.ai\/blog\/7525.html","title":{"rendered":"JSONP \u548c CORS \u4e24\u79cd\u8de8\u57df\u65b9\u6cd5"},"content":{"rendered":"<p>jsonp web \u7aef\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"language-javascript \">        var $jsonp = (function(){\n            var that = {};\n            that.script = document.createElement('script');\n            that.send = function(src, options) {\n                var callback_name = options.callbackName || 'callback',\n                on_success = options.onSuccess || function(){},\n                on_timeout = options.onTimeout || function(){},\n                on_error = options.onError || function(){},\n                on_load = options.onLoad || function(){},\n                timeout = options.timeout || 10; \/\/ sec\n                var timeout_trigger = window.setTimeout(function(){\n                    window[callback_name] = function(){};\n                    that.clear();\n                    on_timeout();\n                }, timeout * 1000);\n                window[callback_name] = function(data){\n                    window.clearTimeout(timeout_trigger);\n                    that.clear();\n                    on_success(data);\n                };\n                that.script.type = 'text\/javascript';\n                that.script.async = true;\n                that.script.src = src;\n                that.script.onload = function() { \n                    that.clear(); \n                    window.clearTimeout(timeout_trigger);\n                    on_load(); \n                };\n                that.script.onerror = function() { \n                    that.clear(); \n                    window.clearTimeout(timeout_trigger);\n                    on_error(); \n                };\n                document.getElementsByTagName('head')[0].appendChild(that.script);\n            }\n            that.clear = function() {\n                if (that.script.parentNode) {\n                    that.script.parentNode.removeChild( that.script );\n                }\n            }\n\n            return that;\n        })();\n\n        $jsonp.send('http:\/\/localhost\/jsonp?callback=callbackfunc', {\n            callbackName: 'callbackfunc',\n            onSuccess: function(json){\n                console.log('jsonp success!', json);\n            },\n            onTimeout: function(){\n                console.log('jsonp timeout!');\n            },\n            onError: function(){\n                console.log(\"jsonp on error\");\n            },\n            onLoad: function(){\n                console.log(\"jsonp on load\");\n            },\n            timeout: 1\n        });\n<\/code><\/pre>\n<p>\u540e\u7aef\u63a5\u53e3 <code>http:\/\/localhost\/jsonp?callback=callbackfunc<\/code> \u8fd4\u56de\u5185\u5bb9\uff1a<\/p>\n<pre data-language=HTML><code class=\"language-markup \">Content-Type: application\/javascript; charset=utf-8\nBody\uff1a\ncallbackfunc({\"name\":\"kyle\",\"version\":\"1.0\"});\n<\/code><\/pre>\n<p>cors \u65b9\u6cd5\u524d\u7aef\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"language-javascript \">       var $cors = (function(){\n            var that = {};\n            that.send = function(url, method, data, options) {\n                on_success = options.onSuccess || function(xhr){},\n                on_timeout = options.onTimeout || function(){},\n                on_error = options.onError || function(){},\n                on_load = options.onLoad || function(){},\n                timeout = options.timeout || 10; \/\/ sec\n\n                var xhr = new XMLHttpRequest();\n                if (\"withCredentials\" in xhr) {\n                    xhr.open(method, url, true);\n                }else if(typeof XDomainRequest != \"undefined\") {\n                    xhr = new XDomainRequest();\n                    xhr.open(method, url);\n                }else{\n                    \/\/ CORS not supported.\n                    xhr = null;\n                };\n\n                if (!xhr) {\n                    return false;\n                };\n                xhr.timeout = timeout * 1000;\n                xhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded; charset=UTF-8');\n                xhr.onload = function() {\n                    on_success(xhr);\n                };\n                xhr.onerror = function() { on_error(); };\n                xhr.onprogress = function () { };\n                xhr.ontimeout = function () {  on_timeout(); };\n                setTimeout(function () { xhr.send(data); }, 0);\n                return true;\n            }\n            return that;\n        })();\n\n        ret = $cors.send(\"http:\/\/localhost\/cors\", \"post\", \"task=123456\", {\n            onSuccess: function(json){\n                console.log('cors success!', json);\n            },\n            onTimeout: function(){\n                console.log('cors timeout!');\n            },\n            onError: function(){\n                console.log(\"cors on error\");\n            },\n            onLoad: function(){\n                console.log(\"cors on load\");\n            },\n            timeout: 2\n        });\n\n        if(!ret) {\n            alert(\"cors not supported.\");\n        }\n<\/code><\/pre>\n<p>\u540e\u7aef\u63a5\u53e3 <code>http:\/\/localhost\/cors<\/code> \u8fd4\u56de\u5185\u5bb9\uff1a<\/p>\n<pre data-language=HTML><code class=\"language-markup \">Access-Control-Allow-Methods: POST, OPTIONS, GET, PUT\nAccess-Control-Allow-Origin: *\nAccess-Control-Expose-Headers: Access-Control-Allow-Origin\nContent-Type: text\/plain; charset=utf-8\n<\/code><\/pre>\n<p>\u4e3b\u8981\u8fd4\u56de\u4ee5\u4e0a\u8fd9\u4e9b\u5934\u90e8\u3002<code>XDomainRequest<\/code> \u662f\u4e3a\u4e86\u517c\u5bb9 IE8\u3002<\/p>\n<p>\u5982\u679c\u4e0d\u662f\u7b80\u5355\u8bf7\u6c42\uff0c\u6d4f\u89c8\u5668\u53ef\u80fd\u4f1a\u8bf7\u6c42 <code>OPTIONS<\/code> \u65b9\u6cd5\uff0c\u540e\u7aef\u4e5f\u8981\u5b9e\u73b0\u8be5\u65b9\u6cd5\uff0c\u8fd4\u56de\u4e0a\u9762\u7684\u5934\u90e8\u3002\u4ee5 <code>gin<\/code> \u6846\u67b6\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-go \"><br \/>func CorsTask(c *gin.Context) {\n    c.Header(\"Access-Control-Allow-Origin\", \"*\")\n    c.Header(\"Access-Control-Expose-Headers\", \"Access-Control-Allow-Origin\")\n    c.Header(\"Access-Control-Allow-Methods\", \"POST, OPTIONS, GET, PUT\")\n    c.Header(\"Control-Allow-Credentials\", \"false\")\n    if c.Request.Method == \"OPTIONS\" {\n        c.AbortWithStatus(204)\n        return\n    }\n    c.String(http.StatusOK, \"yes\")\n}\n\nrouter := gin.Default()\nrouter.POST(\"\/addtask\", CorsTask)\nrouter.OPTIONS(\"\/addtask\", CorsTask)\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>jsonp web \u7aef\u4ee3\u7801\uff1a var $jsonp = (function(){ var that = {}; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-7525","post","type-post","status-publish","format-standard","hentry","category-code_related"],"_links":{"self":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts\/7525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/comments?post=7525"}],"version-history":[{"count":1,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts\/7525\/revisions"}],"predecessor-version":[{"id":7526,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/posts\/7525\/revisions\/7526"}],"wp:attachment":[{"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/media?parent=7525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/categories?post=7525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kyle.ai\/blog\/wp-json\/wp\/v2\/tags?post=7525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}