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;

}

}