vue跨域請求php文件,vue設置跨域請求

本文目錄一覽：

• 1、VUE本地跨域解決方案
• 2、vue跨域解決方法
• 3、Vue項目中跨域問題的解決
• 4、thinkphp6 + nginx + antd Admin-Vue解決跨域

VUE本地跨域解決方案

        我們前端使用介面時，時常遇到跨域問題，一般都是後台設置開放訪問許可權解決跨域，如果後台不配合或者為了安全問題而不能開放許可權，那麼我們前端只能自己解決跨域問題了！！！直接再問vue中使用nodeJS進行代理就可以解決跨域問題。

1、首先找到項目所在的config文件下的index.js，打開此文件；

2、找到module.exports裡面的dev模塊，dev:{ proxyTable:{ } };

將target設置成你想跨域的域名，

changeOrigin設置成true（即：允許跨域）；

pathRewrite設置新的路徑，這個其實沒有必要重新設置；

host設置成：localhost；

port設置成自己本地項目的埠號如：8001；

3、找到main.js並打開，添加：Vue.prototype.HOST = ‘/api’ //設置全局的請求域名；這樣就可以全局使用了！

4、在請求介面的頁面這樣請求介面就可以啦：

var urls = this.HOST +’/login/get/dingdingUser’;//this.HOST就是你跨域的域名，這樣就可以直接跨域了；這時urls就是你的介面名稱啦！！！

vue跨域解決方法

vue跨域解決方法

使用axios請求

第一步驟

在vue.config.js 文件中 module.exports = { } 中添加

devServer: {

proxy: {

‘/profile’: { //指定 路徑 要 跨域請求地址

// 在本地會創建一個虛擬服務端，然後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題

// 將/api開頭的url轉發到target上。

target: ‘ ‘,// 跨域請求地址

changeOrigin: true, //虛擬的站點需要更管origin

ws: true, // 代理websockets

secure: true, // 如果是https介面，需要配置這個參數

pathRewrite: {

// 顧名思義，將/api重寫為 / 此時url變為 而不是

‘^/profile’: ”

}

}

}

第二步驟

在封裝axios請求中設置

const service = axios.create({

baseURL: ‘/profile’,//定義要跨域的介面路徑

withCredentials: true,//是否支持跨域

timeout: 500000, // request timeout

headers: {

‘Cache-Control’: ‘no-cache’,

‘Content-Type’: ‘application/x-www-form-urlencoded’

}

});

Vue項目中跨域問題的解決

在Web端Vue項目開發過程中，跨域問題是不可避免的；在我參與的Vue項目中，使用伺服器代理的解決方案；針對不同的環境（開發環境/生產環境），採用了不同的伺服器代理方案；

伺服器代理的原理大概是這樣：

代理伺服器和訪問源（請求端）是同源的，但和被訪問伺服器（資源端）是不同源的，但伺服器之間的訪問不受瀏覽器同源策略的影響(即不必擔心是否有跨域問題)，那麼我們即可請求到同源伺服器上的從被訪問伺服器上的獲取到的請求資源了 ；

這樣配置完成後，我們發起的每次http請求的Request Url的前面一部分都會和我們本地的源一樣；

舉例：

我們項目跑在開發環境下的 上，那麼上述請求的Request Url的就是 ;這應該就是我們的代理伺服器中該資源的地址，與客戶端同源；而數據的實際來源則是 ，這樣即實現代理跨域；

目前猜測這個代理伺服器可能是Node；

nginx 版本： 1.16.1

修改 nginx.conf 文件下的 serve 下配置：

舉例：

生產環境下的,我們項目跑Nginx伺服器監聽的 上，那麼上述請求的Request Url的就是 ;

這應該就是我們的代理伺服器中該資源的地址，與客戶端同源；

而數據的實際來源則是 ，這樣即實現代理跨域；

thinkphp6 + nginx + antd Admin-Vue解決跨域

我服務端是PHP，請求地址為

location / {

if (!-e $request_filename){

rewrite ^(.*)$ /index.php?s=$1 last; break;

}

if ($request_method = ‘OPTIONS’) {

add_header Access-Control-Allow-Origin ‘ ‘ ;

add_header Access-Control-Allow-Credentials true;

add_header Access-Control-Allow-Headers ‘token,Authorization’;

add_header Content-Length 0;

return 204;

}

}