vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題
使用Nginx 反向代理解決跨域問(wèn)題(vue.js使用代理去掉vue.js因?yàn)榭缬蚨|發(fā)的options請(qǐng)求)
我們的項(xiàng)目還是需要node.js作為容器的
一、Windows 下安裝Nginx (官網(wǎng)下載穩(wěn)定版http://nginx.org/en/download.html)
二、修改config里的nginx.conf文件的server
server {
listen 8899;// 你的端口
server_name localhost;
root C:/ZOBSF_F/dist;//你打包部署的文件路徑
#charset koi8-r;
#access_log logs/host.access.log main;
# 匹配 api 路由的反向代理到API服務(wù)
location ^~/api {
proxy_pass http://119.23.227.141:10001/;//你的后端IP和端口
}
#根據(jù)路由設(shè)置,避免出現(xiàn)404
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
三、 你的uve.js打包的dist文件如下

四、然后再加一個(gè)項(xiàng)目啟動(dòng)配置文件 server.production.js
var express = require('express');
var app = express();
var compression = require('compression');
var proxyMiddleware = require('http-proxy-middleware')
var history = require('connect-history-api-fallback');
app.use(compression());
app.use(express.static(__dirname));
app.middleware = [//使用代理api
proxyMiddleware(['/api'], {target: 'http://192.168.11.103:10001',
changeOrigin: true,
pathRewrite: {
'^/api' : '/',
},}),
];
app.get('*', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.use(history());
app.use(app.middleware);
app.listen('8080', function(error) {
console.info("==================系統(tǒng)正在啟動(dòng)中...=============================");
if (error) {
console.error(error)
} else {
console.info("==================9999系統(tǒng)啟動(dòng)成功?。。?============================")
}
});
五、然后在項(xiàng)目目錄下使用命令node server.production.js 回車(chē)發(fā)現(xiàn)包缺少依賴(lài),使用npm install [報(bào)錯(cuò)提示的依賴(lài)組件] 即可 分別有express、compression、http-proxy-middleware等。
然后啟動(dòng)項(xiàng)目就可以了 訪問(wèn)地址http://localhost:8080/xxx即可
六、vue.js使用代理具體可以百度(在config配置文件里的inde.js修改就可了)
proxyTable: {
'/api': {
target: Host.Host,//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/'//這里理解成用‘/api'代替target里面的地址,后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add',直接寫(xiě)‘/api/user/add'即可
}
}
},
以上這篇vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法(基于 vue + AntDesign)
這篇文章主要介紹了Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法,該項(xiàng)目是基于 vue + AntDesign的,具體實(shí)例代碼給大家介紹的非常詳細(xì) ,需要的朋友可以參考下2019-11-11
keep-alive不能緩存多層級(jí)路由菜單問(wèn)題解決
這篇文章主要介紹了keep-alive不能緩存多層級(jí)路由菜單問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue實(shí)現(xiàn)移動(dòng)端H5數(shù)字鍵盤(pán)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端H5數(shù)字鍵盤(pán)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08
Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2022-12-12
詳解vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案
這篇文章主要介紹了vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法,本文圖文并茂給大家介紹的非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別(詳解)
下面小編就為大家分享一篇基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12

