端口不同,就涉及到ajax的跨域問題。ajax跨域可以用jsonp的方式來傳遞數(shù)據(jù),也可以在被請求的頁面上加入header:Access-Control-Allow-Origin:*,*代表任何請求來源,也可以改成指定的IP或域名進行限制,不過這種方法安全級別較低,不能用來獲取安全要求較高的數(shù)據(jù)。
創(chuàng)新互聯(lián)公司專注于寧武網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供寧武營銷型網(wǎng)站建設(shè),寧武網(wǎng)站制作、寧武網(wǎng)頁設(shè)計、寧武網(wǎng)站官網(wǎng)定制、微信平臺小程序開發(fā)服務(wù),打造寧武網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供寧武網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
前端用vue-router管理路由,用ajax不起作用了,那該怎么和PHP通信前端用vue-router管理路由,用ajax不起作用了
vue在服務(wù)端部署時,我們都知道通過npm run build 指令打包好的dist文件,通過http指定是可以直接瀏覽的,Thinkphp通過域名指向index.php文件才可以瀏覽。要使前端正常調(diào)用后端數(shù)據(jù),有兩種方法:1、前端跨域調(diào)用后端數(shù)據(jù),2、前端打包文件部署在后端的服務(wù)器文件夾下(同域)。
web服務(wù)器: apache
一、跨域
在服務(wù)器配置站點:
在路徑/home/www/??下創(chuàng)建test項目文件夾,用來放項目文件。??
找到httpd-vhosts.conf文件配置站點??
前端站點:??
ServerName?test.test.com??
DocumentRoot?"/home/www/test/dist"????
DirectoryIndex?index.html??
后端站點:??
ServerName?test.testphp.com??
DocumentRoot?"/home/www/test/php"????
DirectoryIndex?index.php??
將前端打包好的dist文件放在/home/www/test/ 文件夾下,運行可瀏覽,當(dāng)路徑改變時,刷新會出現(xiàn)404錯誤。此時dist文件下創(chuàng)建一個.htaccess文件,當(dāng)路徑不存在時,路徑指向能解決此問題。
RewriteEngine?On??
RewriteBase?/??
RewriteRule?^index\.html$?-?[L]??
RewriteCond?%{REQUEST_FILENAME}?!-f??
RewriteCond?%{REQUEST_FILENAME}?!-d??
RewriteRule?.?/index.html?[L]??
在/home/www/test文件夾下創(chuàng)建項目根目錄php文件夾,將thinkphp文件放在php下。TP5的入口文件在public文件下,在這將public下的入口文件index.php挪到php文件夾下(個人習(xí)慣將入口文件放在項目根目錄), 后端綁定Index模塊。
前端調(diào)用后端接口,存在跨域,跨域解決方法有好幾種,在這我將在后端php做配置,解決跨域問題,在公用控制器設(shè)置跨域配置:
class?Common?extends?Controller??
{??
public?$param;??
//?設(shè)置跨域訪問??
public?function?_initialize()??
{??
parent::_initialize();??
isset($_SERVER['HTTP_ORIGIN'])???header('Access-Control-Allow-Origin:?'.$_SERVER['HTTP_ORIGIN'])?:?'';??
header('Access-Control-Allow-Credentials:?true');??
header('Access-Control-Allow-Methods:?GET,?POST,?PUT,?DELETE,?OPTIONS');??
header("Access-Control-Allow-Headers:?Origin,?X-Requested-With,?Content-Type,?Accept,?authKey,?sessionId");??
$param?=??Request::instance()-param();??
$this-param?=?$param;??
}??
}??
前端調(diào)用登錄接口: this.axios.post('', {user: '', password: ''})。
(可在webpack.base.conf.js文件下可定義接口:)
二、同域
后端配置同上,公共配置器中的header配置注釋。將前端的dist文件下的所有文件(包含.htaccess),放在php文件夾下。將后端index控制器的index方法的路徑重定向php下的index.html文件:
namespace?app\index\controller;??
use?think\Controller;??
class?Index?extends?Controller??
{??
public?function?index()?{??
$this-redirect('/index.html');??
}??
}??
前端調(diào)用登錄接口: this.axios.post('/index.php/base/login', {user: '', password: ''})
轉(zhuǎn)自: