|
關(guān)于解決瀏覽器不同域名交互數(shù)據(jù)的跨域問題(php和vue）
方法一：
1.允許所有的域名下的ajax請求，下面2行經(jīng)測試chrome和360極速瀏覽器，缺一不可，即第二個參數(shù)不能缺少
<?php
//header('Access-Control-Allow-Origin:*');
// 響應(yīng)頭設(shè)置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
2.允許某個單獨域名下的ajax請求
<?php
//header('Access-Control-Allow-Origin:http://www.');
// 響應(yīng)頭設(shè)置
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 3.（有待測試？）允許某個單獨域名下的ajax請求，且允許該ajax請求將本地的cookie傳遞到本服務(wù)器，實現(xiàn)登陸效果。注意比如原來的a.com下面的js代碼
在a.com有自己的cookie，那么如果a.com中js代碼向b.com發(fā)起登陸申請，使用cookie，那么a.com和b.com中的cookie是2套不同的cookies，
即相當(dāng)于2個不同的網(wǎng)站會話，不能相互讀取對方的cookies。
//header('Access-Control-Allow-Origin:http://www.');
// 響應(yīng)頭設(shè)置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
//允許攜帶cookie
header('Access-Control-Allow-Credentials:true'); 跨域資源共享（CORS）
實際上關(guān)于同源，只是瀏覽器在控制，即瀏覽器a.com下的js代碼發(fā)送一個ajax請求到b.com，實際上瀏覽器已經(jīng)拿到了b.com的返回數(shù)據(jù)，只是沒有交給a.com中的js代碼處理，因為cors跨域資源共享的設(shè)置。因為瀏覽器會首先判斷來自b.com的響應(yīng)頭的 Access-Control-Allow-Origin頭是否允許當(dāng)前域名a.com獲取b.com的數(shù)據(jù)，如果允許那么就給到a.com的js代碼處理。根據(jù)瀏覽器的不同，瀏覽器還可能判斷Access-Control-Allow-Headers這個頭是否匹配。也就是說關(guān)于跨域問題，實際上是瀏覽器自身的配置導(dǎo)致的，比如你下載postman客戶端，去請求b.com的接口，就沒有這個跨域問題。 普通跨域請求：只服務(wù)端設(shè)置Access-Control-Allow-Origin即可，前端無須設(shè)置，若要帶cookie請求：前后端都需要設(shè)置。
需注意的是：由于同源策略的限制，所讀取的cookie為跨域請求接口所在域的cookie，而非當(dāng)前頁。如果想實現(xiàn)當(dāng)前頁cookie的寫入，
需啊喲注意，只有當(dāng)前Access-Control-Allow-Origin的值只有當(dāng)是非*的時候（即需要是具體的某個或多個域名），此時Access-Control-Allow-Credentials才能被設(shè)置為true，否則設(shè)置無效。 方法二：（有待實測）使用vue自帶的跨域方法，本方法實際上也是nodejs自行實現(xiàn)了一個虛擬代理功能，功能該代理服地址轉(zhuǎn)發(fā)請求的方式，只需要
代理服務(wù)的地址與當(dāng)前網(wǎng)站的地址域名同源（協(xié)議，域名，端口）即可。 我們在項目根目錄，一般也就是package.json文件所在目錄，新增一個vue.config.js文件（vue會自動檢索有沒有該文件），加入代碼：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://co.', // 配置訪問的服務(wù)器地址
pathRewrite: { '^/api': '' }, // 用于將請求中的 /api 字符串替換為空, 然后訪問地址就能正確訪問，若不添加此行配置，那么訪問地址就變成了： http://localhost:5000/api/request_url，這樣的請求就會出現(xiàn) 404 操作
ws: true, // 是否支持 webstocket, 默認(rèn)是 true
changeOrigin: true // 用于控制請求頭中的 host 值, 默認(rèn)是 ture//開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會有跨域問題
},
'/api2': {
target: 'http://localhost:6000', // 配置訪問的服務(wù)器地址
pathRewrite: { '^/api2': '' }, // 用于將請求中的 /api2 字符串替換為空, 然后訪問地址就能正確訪問，若不添加此行配置，那么訪問地址就變成了： http://localhost:6000/api/request_url，這樣的請求就會出現(xiàn) 404 操作
ws: true, // 是否支持 webstocket, 默認(rèn)是 true
changeOrigin: true // 用于控制請求頭中的 host 值, 默認(rèn)是 ture
}
}
}
}
|
