前端Vue 8080端口，后端Node.js 8085端口 主要記錄下前后端不同端口遇到的問(wèn)題

1、寫(xiě)服務(wù)器端程序，我的在(node_proxy/index.js)下

app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', req.headers.origin || '*'); res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,/'Origin/',Accept,X-Requested-With'); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.header('Access-Control-Allow-Credentials', true); res.header('X-Powered-By', ' 3.2.1'); res.header('Content-Type', 'application/json;charset=utf-8'); if (req.method === 'OPTIONS') { res.sendStatus(200); } else { next(); }});

這段代碼很重要，要是沒(méi)有的話會(huì)出現(xiàn) No 'Access-Control-Allow-Origin' header is present on the requested resource 錯(cuò)誤。

2、在前端用axios寫(xiě)get請(qǐng)求處理程序，寫(xiě)在了Card模板下

mounted(){ axios.get(HOST) .then(response => { this.sed = response.data.data; }) }

3、在config/index.js下配置proxyTable：

proxyTable: { '/seller': { target: 'http://localhost:8085', changeOrigin: true, pathRewrite: {  '^/seller': '/seller' } } },

4、分別啟動(dòng)前后端，OK~/(≧▽≦)/~啦啦啦~

以上這篇Vue前后端不同端口的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長(zhǎng)站。