Vue + Nodejs + Express 解決跨域的問題

首先檢測(cè)你的Vue的版本號(hào)
此文章針對(duì)3.0版本解決跨域問題

$ vue -V 2.X or 3.X

直接訪問如下

created() {this.$axios.get('http://localhost:3000/users').then(res => {this.list = res.data.data;console.log(this.list)}).catch(err => {console.log(err)})}

但是會(huì)出現(xiàn)如下的報(bào)錯(cuò)

因?yàn)槲覀兛缬?瀏覽器攔截了我們的請(qǐng)求，下面是解決跨域的辦法

1.配置BaseUrl

首先在main.js中，配置下我們?cè)L問的Url前綴：

import App from './App.vue' import router from './router' import store from './store' import Vant from 'vant'; import 'vant/lib/index.css'; import axios from 'axios'Vue.use(Vant); Vue.config.productionTip = false; Vue.prototype.$axios = axios; // axios.defaults.baseURL = '/users'; axios.defaults.headers.post['Content-Type'] = 'application/json'; // new Vue({router,store,render: h => h(App) }).$mount('#app');

關(guān)鍵代碼是：Axios.defaults.baseURL = ‘/api’，這樣每次發(fā)送請(qǐng)求都會(huì)帶一個(gè)/api的前綴.

2.配置代理

在 package.json 文件的同級(jí)目錄下創(chuàng)建 vue.config.js 文件。給出該文件的基礎(chǔ)配置：

module.exports = {outputDir: 'dist', //build輸出目錄assetsDir: 'assets', //靜態(tài)資源目錄（js, css, img）lintOnSave: false, //是否開啟eslintdevServer: {open: true, //是否自動(dòng)彈出瀏覽器頁(yè)面host: "localhost", port: '8081', https: false, //是否使用https協(xié)議hotOnly: false, //是否開啟熱更新proxy: null,} }

修改 vue.config.js 中 devServer 子節(jié)點(diǎn)內(nèi)容，添加一個(gè) proxy：

devServer: {open: true, //是否自動(dòng)彈出瀏覽器頁(yè)面host: "localhost",port: '8080',https: false,hotOnly: false,proxy: {'/users': {target: 'http://localhost:3000/users', //API服務(wù)器的地址changeOrigin: true,pathRewrite: {'^/users': ''}}},

3.修改請(qǐng)求Url

修改剛剛的axios請(qǐng)求，把url修改如下：

created() {this.$axios.get('/show').then(res => {this.list = res.data.data;console.log(this.list)}).catch(err => {console.log(err)})}

4.重啟服務(wù)

重啟服務(wù)后就可以正常的訪問了

5.番外

當(dāng)然，跨域問題也可以由后端解決，將下面這個(gè)過濾器加入程序即可。

import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;/*** 跨域過濾器* @author jitwxs* @since 2018/10/16 20:53*/ public class CorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;HttpServletRequest request = (HttpServletRequest) req;// 不使用*，自動(dòng)適配跨域域名，避免攜帶Cookie時(shí)失效String origin = request.getHeader("Origin");if(StringUtils.isNotBlank(origin)) {response.setHeader("Access-Control-Allow-Origin", origin);}// 自適應(yīng)所有自定義頭String headers = request.getHeader("Access-Control-Request-Headers");if(StringUtils.isNotBlank(headers)) {response.setHeader("Access-Control-Allow-Headers", headers);response.setHeader("Access-Control-Expose-Headers", headers);}// 允許跨域的請(qǐng)求方法類型response.setHeader("Access-Control-Allow-Methods", "*");// 預(yù)檢命令（OPTIONS）緩存時(shí)間，單位：秒response.setHeader("Access-Control-Max-Age", "3600");// 明確許可客戶端發(fā)送Cookie，不允許刪除字段即可response.setHeader("Access-Control-Allow-Credentials", "true");chain.doFilter(request, response);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}/*注冊(cè)過濾器：@Beanpublic FilterRegistrationBean registerFilter() {FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>();bean.addUrlPatterns("/*");bean.setFilter(new CorsFilter());// 過濾順序，從小到大依次過濾bean.setOrder(Ordered.HIGHEST_PRECEDENCE);return bean;}*/ }

總結(jié)

以上是生活随笔為你收集整理的Vue + Nodejs + Express 解决跨域的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。