vue根目录内vue.config.js

module.exports = {
  publicPath : process.env.NODE_ENV === 'production' ? './' : '/',
  devServer: {
    proxy: {
      "/api": {
        target: 'http://www.hao123.com', // 前端域名
        changeOrigin: true, // 如果接口跨域 ， 需要进行这个参数配置
        pathRewrite: {
          "^/api": "/api"
        },
      },
    },
  },
};

axios接口实例

// 使用单例模式创建axios实例
const instance = axios.create({
    baseURL : 'http://www.hao123.com/api', // 设置默认url
    timeout : 5000,// 设置超时时间
})

nginx配置

• hosts文件将本地IP指向了 www.hao123.com 的域名当作nginx服务器的域名

    server {
        listen       80; // 指定nginx进程端口
        server_name  www.hao123.com; // 配置nginx域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist/; // 配置默认访问路径
            index  index.html index.htm; // 默认打开的文件名
        }
        location /api {
            proxy_pass http://localhost:9999; // 指定 www.hao123.com/api.....的请求代理到 localhost:9999的域名
            proxy_read_timeout 300s;
            # proxy_set_header Host $host:$server_port; // 下面三行设置了请求头 ， 后发现没用 注释掉了
            # proxy_set_header X-Real-IP $remote_addr;
            # proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

nodeJs代码

const express = require('express');
const app = express();
const Mock = require('mockjs')
// 引入history代理
const history = require('connect-history-api-fallback');
const data = Mock.mock({
    'list|1-10' : [{
        'id|2-5.2-5' : new Number(1)
    }]
})

console.log(JSON.stringify(data , null , 4))

// app.use( history() );
app.listen( 9999 , 'localhost' , () => {
    console.log('localhost:9999');
})

// app.use(express.static(__dirname+'/src/dist/',{index : "index.html"}));

app.get('/api/data' , ( request , response )=> { // 请求前面要配合前端设置api的路径
    console.log(request);
    console.log(data);
    response.send({
        msg : 0,
        data : data
    })
})