初次使用vue搭建项目,在进行交互请求数据时候报了经常会出现的错误,

Failed to load http://localhost:3000/add: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

解决办法:

使用vue init webpack pro(项目名称)创建的项目是基于webpack的项目,了解webpack的都应该知道它是一个JavaScript 应用程序的静态模块打包器,项目所用到的插件,npm包等都通过它导入使用,跨域设置也通过它设置。

vue2+webpack使用axios跨域请求数据的设置

项目目录如图所示,我们要修改的是webpack的配置文件 config/index.js

vue2+webpack使用axios跨域请求数据的设置

将原来的

proxyTable: {}修改为

proxyTable: {

'/api': {

target: 'http://localhost:3000/', //是你要请求后台的域名和端口

changeOrigin: true,

pathRewrite: {

'^/api': '/'

}

}

}

然后再使用axios请求的时候就不会报跨域的错误了!!

相关文章:

  • 2021-12-05
  • 2021-07-20
  • 2021-06-29
  • 2021-06-27
  • 2021-06-12
  • 2021-10-18
  • 2022-01-22
  • 2021-12-13
猜你喜欢
  • 2021-06-14
  • 2022-02-14
  • 2021-12-20
  • 2021-10-09
  • 2021-09-14
  • 2021-12-10
相关资源
相似解决方案