VUE 利用axios请求接口

跨域问题

开发环境

找到config文件夹下面的index.js文件，修改proxyTable

//config 下的index.js
proxyTable: {
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: 'https://www.baidu.com', //接口的域名
    secure: true,// 如果是https接口，需要配置这个参数
    changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
    pathRewrite: { 
      '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉 
    } 
  } ,
},
host: '10.16.101.136', // can be overwritten by process.env.HOST
port: 8071, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,//是否自动打开浏览器
errorOverlay: true,//查询错误
notifyOnErrors: true,//通知错误
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

修改完之后重启项目 npm run dev

生产环境

设置nginx配置文件：

location {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}

配置完成后重启nginx

service nginx reload

设置不同的接口地址

/config/dev.env.js

/config/prod.env.js

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//10.16.101.136:8071/api"'//本地接口地址
})

//prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://www.baidu.com"',//生产接口地址
}

配置完成后在main.js中定义

import axios from 'axios'
Vue.prototype.$axios = axios;
Vue.prototype.baseURL = process.env.API_ROOT; //读取config中的配置
// axios.defaults.timeout = 5000; //默认请求时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //请求头格式
// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//请求头格式

调用

this.$axios.post(this.baseURL+"/login/login",params).then(res=>{
    console.log(res)
},err=>{
    console.log(err);
})

参考网址：https://blog.csdn.net/u014054437/article/details/82970725

https://www.cnblogs.com/web-record/p/9467258.html

https://segmentfault.com/q/1010000009919120

来源：https://my.oschina.net/qishan/blog/3112875

标签

nginx

npm

Vue.js

ios

axios