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 解决跨域的问题相关推荐

vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
VUE部署nginx解决跨域问题
VUE部署nginx解决跨域问题 Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图. VUE配置的代理 Vue的代理跨域问题,需要确定的是在开发 ...
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
Express解决跨域问题
跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 例如:a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进 ...
axios请求mysql_接收post请求（vue+axios）解决跨域问题（三）
1.通过postman测试post请求新建一个接收post的路由 //根据post的id查询 var selId='select * from list where id=?' //响应post r ...
在Vue2中怎么解决跨域
Vue中怎么解决跨域问题协议域名端口相同为同域否则都为跨域这就是需要用跨域来请求数据的报错第一步:在vue项目中的跟目录下创建一个 vue.config.js ,文件名是固定的,不一样就会报错 ...
前后端分离项目，如何解决跨域问题？
跨域问题是前后端分离项目中非常常见的一个问题,举例来说,编程猫(codingmore)学习网站的前端服务跑在 8080 端口下,后端服务跑在 9002 端口下,那么前端在请求后端接口的时候就会出现跨域 ...
Axios解决跨域问题
什么是跨域首先需要了解到浏览器的同源策略,同源策略是最核心也是最基本的安全功能,缺少同源策略浏览器的正常功能可能会受到影响.同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互. ...
express框架在nodejs中的使用+解决跨域问题（cors三方库）
第一部分commonJS使用第三方框架一.托管静态资源(让用户直接访问静态资源) 例如,如上url分别是请求一张图片,一份样式文件,一份js代码.我们实现的web服务器需要能够直接返回这些文件的内容 ...

Vue + Nodejs + Express 解决跨域的问题

Vue + Nodejs + Express 解决跨域的问题

1.配置BaseUrl

2.配置代理

3.修改请求Url

4.重启服务

5.番外

Vue + Nodejs + Express 解决跨域的问题相关推荐

最新文章

热门文章