Laravel跨域問題解決方案

一、Nginx跨域解決方案

一些原因會導致我們需要從Laravel應用的URL中實現跨域請求。當前，許多開發者在Laravel和Nginx之間採用一些配置方法，以解決跨域問題。

為了在Nginx中實現跨域訪問，我們需要在Laravel應用程序中配置一些參數。請在location / {} 區塊內增加如下配置：

location / {
    add_header 'Access-Control-Allow-Origin' "*" always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Authorization, Origin, Content-Type, Accept' always;
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Max-Age' 1728000 always;
        add_header 'Content-Length' 0 always;
        return 204;
    }
}

二、React跨域解決方案

React通常會與Laravel組合使用，因此在跨域問題上，我們讀者一些常見的解決方案。

React中可以使用cors庫來解決Laravel端跨域訪問問題。使用cors庫前，需要使用npm安裝它。

安裝命令：npm install cors –save

使用示例如下：

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

app.get('/example', (req, res) => {
   res.send('Success!')
})

app.listen(3000)

三、Ajax跨域解決方案

1、Ajax跨域JSONP解決方案

JSONP是一種通過動態創建<script>標籤來實現跨域訪問的方法。使用JSONP存在一定的安全風險，因此在使用時需謹慎。

下面是一個JSONP的示例。我們可以把調用的URL註冊到Laravel應用中的routes，然後在JavaScript代碼中調用JSONP方法即可：

Route::get('/data',function(){
   $callback=Input::get('callback');
   $data_array = ['name'=>'Jack Ma','age'=>'40'];
   $data = json_encode($data_array);
   return $callback.'('. $data .')';
});

此時，在前端調用Laravel應用數據時，只需在AJAX中使用JSONP方法來實現跨域請求：

function getJsonpData(url){
   return new Promise((resolve, reject) => {
     const script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = `${url}&callback=jsonpCallback`;
     window['jsonpCallback'] = function(data){
       resolve(data);
       document.body.removeChild(script);
     };
     script.onerror = reject;
     document.body.appendChild(script);
   });
}

2、Ajax跨域CORS解決方案

CORS是一種瀏覽器級別的解決方案，原理為在請求頭中添加一些特定的信息。這樣即可實現跨域請求。

下面是一個實現Ajax跨域CORS請求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.laravel.com/api/data', true);
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type','application/json');
xhr.send();
xhr.onreadystatechange = function () {
   if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
   }
};

四、前後端分離跨域問題解決方案

採用前後端分離的方案成為了Web開發的主流，因此跨域問題成為了一個必須解決的問題。這裡提供一些解決方案供大家參考。

1、代理轉發跨域解決方案

實現前後端分離之後，我們可以通過代理轉發的方式來解決跨域請求問題。我們可以在Vue.js中定義一個config/index.js文件，將需要跨域的介面地址和本地代理服務地址配置進去：

module.exports = {
  dev: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

使用示例如下：

axios.get('/api/data/info').then(function(res){
    console.log(res)
}).catch(function(err){
    console.log(err);
});

2、動態HTML跨域解決方案

在前端使用Vue開發時，如果跨域訪問圖片或其他動態資源，也常常會使用代理方式來解決問題。下面是使用Vue.js提供的代理方式來訪問圖片的示例：

原創文章，作者：MCGE，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/137254.html