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

首先檢測你的Vue的版本號
此文章針對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)})}

但是會出現如下的報錯

因為我們跨域,瀏覽器攔截了我們的請求，下面是解決跨域的辦法

1.配置BaseUrl

首先在main.js中，配置下我們訪問的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');

關鍵代碼是：Axios.defaults.baseURL = ‘/api’，這樣每次發送請求都會帶一個/api的前綴.

2.配置代理

在 package.json 文件的同級目錄下創建 vue.config.js 文件。給出該文件的基礎配置：

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

修改 vue.config.js 中 devServer 子節點內容，添加一個 proxy：

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

3.修改請求Url

修改剛剛的axios請求，把url修改如下：

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

4.重啟服務

重啟服務后就可以正常的訪問了

5.番外

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

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;// 不使用*，自動適配跨域域名，避免攜帶Cookie時失效String origin = request.getHeader("Origin");if(StringUtils.isNotBlank(origin)) {response.setHeader("Access-Control-Allow-Origin", origin);}// 自適應所有自定義頭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);}// 允許跨域的請求方法類型response.setHeader("Access-Control-Allow-Methods", "*");// 預檢命令（OPTIONS）緩存時間，單位：秒response.setHeader("Access-Control-Max-Age", "3600");// 明確許可客戶端發送Cookie，不允許刪除字段即可response.setHeader("Access-Control-Allow-Credentials", "true");chain.doFilter(request, response);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}/*注冊過濾器：@Beanpublic FilterRegistrationBean registerFilter() {FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>();bean.addUrlPatterns("/*");bean.setFilter(new CorsFilter());// 過濾順序，從小到大依次過濾bean.setOrder(Ordered.HIGHEST_PRECEDENCE);return bean;}*/ }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。