vue关于axios、跨域、手机访问项目问题记录

1.axios基本使用

1.1 在main.js中全局配置：

import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http=axios
axios.defaults.baseURL = '/api'  //默认的根路径

1.2 axios 中的GET请求
axios.get( '/user', { params: { ID: ‘001’ } }，{ headers:{"Authorization":"Basic "+"ccccccc"} }  )
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

1.3 axios 中的POST请求
axios.post('/user', { firstName: '1', lastName: '2' }, { headers:{"Authorization":"Basic "+"ccccccc"} }  )
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})

 

2.发起跨域请求

  2.1 在vue.config.js中配置(没有就在根目录下创建一个)

module.exports = {
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost",  //可注
        port: '8081', //可注
        https: false, //可注
        hotOnly: false,  //可注
        proxy: {   //代理
            '/api': {
                target: 'http://192.168.50.241/', //API服务器的地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }  }     
        },
    } }

  2.2 组件发起axiso请求：

var aa1 = 'cgi-bin/devInfo.cgi?action=list&group=SYSINFO'
this.$http.get(aa1, {headers:{"Authorization":"Basi"+"dssd"}} )
    .then(function(){console.log('ok')})
    .catch(function(){console.log('no')})

 

3.本地开启服务vue跨域请求：

  3.1 在vue.config.js中配置(没有就在根目录下创建一个)

module.exports = {
    dev: {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable:{
         '/api':{
             target: 'http://localhost:3000',
             changeOrigin:true,
             secure: true,
             pathRewrite:{
                 '^/api':''
             }
         }
     }
    }
}  //main.js 不需要设置默认url根路径

  3.2 组件发起axiso请求：

 this.axios.get('/').then((data)=>{
         console.log(data)
       }) //不需要加 api/

 

4.node支持跨域请求（这样vue就不用跨域了）：

  4.1 app.js配置

var express = require('express')

var app = express()

//全部允许，二选一
app.all("*",function(req,res,next){
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})

//设置固定地址允许，二选一
app.all("*",function(req,res,next){
    var orginList=[
        "http://127.0.0.1",
        "http://www.alibaba.com",
        "http://www.qq.com",
        "http://www.baidu.com"
    ]
    if(orginList.includes(req.headers.origin.toLowerCase())){
        //设置允许跨域的域名，*代表允许任意域名跨域
        res.header("Access-Control-Allow-Origin",req.headers.origin);
    }
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})


app.get('/', function(erq, res){
    res.send('iloveyou')
})

app.listen(3000, function(){console.log('开启ok')})

  4.2 组件发起axiso请求：

   this.axios.get('http://localhost:3000').then((data)=>{
         console.log(data)
       })

 

5.手机看查看vue项目：

5.1 vue.config.js 配置如下，主要设置host为本机ip

module.exports = {
    devServer: {
      port: 1116, // 设置端口号
      host: '192.168.0.102', // ip
      disableHostCheck: true, //是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查
      hotOnly: false, // 热更新
      https: false, // https:{type:Boolean}配置前缀
      open: false, //配置自动启动浏览器
      proxy: null,  //设置代理
      
    }
}

   5.2 关闭windous防火墙或搜索防火墙 -- 域网络 -- 迈克菲防火墙（点打开应用） -- 端口和服务系统 -- 通用即插即用端口里的本地tcp/ip端口都可用也可以添加

   5.3 开始菜单搜索防火墙并打开 -- 高级设置 -- 入站规则 -- 新建规则 -- 规则类型选端口并下一步 -- 协议和端口选TCP和特定本地端口并输入3000并下一步 -- 操作选允许连接并下一步 -- 配置文件三个都勾选(域、专用、公用)并下一步 -- 名称随便写如’服务端测试‘ -- 完成