跨域請求 · laravel 筆記

## 跨域請求 1.第一步設置響應頭 ~~~ header('Access-Control-Allow-Origin:\*'); ?//支持全域名訪問，不安全，部署后需要固定限制為客戶端網址 header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 動作 header('Access-Control-Allow-Headers:x-requested-with,content-type,uid, user-token, business-id'); ?//響應頭請按照自己需求添加。 ~~~ laravel 中間件設置跨域 ~~~ // 中間件返回json public function handle(Request $request, Closure $next) { // 跨域請求貴 $response = $next($request); $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '*'; $allow_origin = [ 'http://www.work.com:8010', 'http://www.work.com:8020', 'http://www.work.com:8030', 'http://www.work.com:8040', 'http://www.work.com:8050', 'http://www.work.com:8060', 'http://www.work.com:8070', 'http://www.work.com:8080', 'http://www.work.com:8090', ]; if (in_array($origin, $allow_origin)) { $response->header('Access-Control-Allow-Origin', $origin); $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN, uid, user-token, business-id'); $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated'); $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS'); $response->header('Access-Control-Allow-Credentials', 'true'); } return $response; } ~~~ ### 2、ajax設置header 一、setting參數 headers ~~~ $.ajax({ headers: { Accept: "application/json; charset=utf-8" }, type: "get", success: function (data) { } }); ~~~ 二、beforeSend方法 ~~~ $("#test").click(function () { $.ajax({ type: "GET", url: "default.aspx", beforeSend: function (request) { request.setRequestHeader("Test", "Chenxizhang"); }, success: function (result) { alert(result); } }); }); ~~~ ### 3、ajax跨域 ## get()請求： ~~~ $.ajax({ type: "get", url: "你的請求地址", dataType: 'jsonp', //【jsonp進行跨域請求只支持get】 data:{ //【這里填寫是傳給服務端的數據可傳可不傳數據必須是json格式】 "a":"b", "c":"d" }, success: function(data) { //【成功回調】 console.log(data); }, error: function(xhr, type) { //【失敗回調】 } }); ~~~ ## post()請求： ~~~ $.ajax({ type:"post", url:"你的請求地址", data:{ //【這里填寫是傳給服務端的數據可傳可不傳數據必須是json格式】 "a":"b", "c":"d" }, dataType:'json', //【這里要小心啊，不要用jsonp，一定是json】 crossDomain: true, //【這個很重要，一定要加】 success:function(result){ console.log(result); }, error:function(result){ console.log(result); } }); ~~~