vue项目中axios的跨域问题

最近被这个axios的跨域问题弄得头疼，因为我的项目配置实在是不到位，先来看看我的axios请求代码
在这里插入图片描述
然后看看没有设置跨域而出现的问题

此时我的数据可以传送到后台并存入数据库，但是后台返回的数据我无法接收
经过分析，我的发现主要问题是代码中的api无法映射到配置文件中设置的api
config/index.js:
在这里插入图片描述
在网上找了很多原因，我甚至把axios的中文文档又读了两遍，后来发现问题所在的几个可能：
1.项目并非使用vue-cli搭建
我的项目是使用iView官网的项目，而不是使用vue-cli脚手架搭建的,因此我的项目中没有config文件夹
在这里插入图片描述
而我的api是在index.js里配置的，是我自己新建config文件夹以及其中三个js文件自行写入，发现这样api无法渲染到组件中的api。
解决方法：我老老实实的安装vue-cli
npm i -g vue-cli
然后就卡在安装那里不动了，接着我换成cnpm i -g vue-cli发现可以了
2.npm的版本问题
在安装完vue-cli并配置完之后，我npm run dev重启了项目
报了这个错
[HPM] Error occurred while trying to proxy request /login from localhost:8888 to localhost:8080/ssm-p (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)
发现是npm版本的问题，npm 是随 node.js 一起发布的包管理工具，默认采用的并不一定是最新版本，我使用了以下命令：
cnpm -g install npm ( 会更新到最新稳定版 )
然后再重启项目
3.api配置错误
代理写错，需要在域名前写上http://
在这里插入图片描述
4.在webpack.config.js加入配置
如果以上三个问题解决了依然出现错误，我们可以在webpack.config.js的devServer中加入代理来实现

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080/ssm-p',
        changeOrigin: true,		//是否允许跨域
      }
    }
  }

试一下，跨域成功了，但是注意了，!!!这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题，如我们部署的服务器端口是3001，需要前后端联调，第一步前端我们可以分生产production和开发development两种环境分别测试，在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，生产环境下用正常的接口地址，所以这样配置
config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',		//开发环境
    API_HOST:"/api/"
})

config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',		//生产环境
    API_HOST:'"http://localhost:8080/ssm-p'
}

至此，大功告成

vue项目中axios的跨域问题

猜你喜欢