vue配置开发环境和生产环境调用不同的域名以及跨域问题

78 阅读 0 评论 52 点赞

我是靠谱客的博主辛勤小鸭子，最近开发中收集的这篇文章主要介绍vue配置开发环境和生产环境调用不同的域名以及跨域问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

注意: 这里vue项目与后端是前后端完全分离的,所有请求后端的地址是不一样的

安装axios

npm install axios

然后

npm install --save axios vue-axios

用到post请求时，需要安装qs

import qs from 'qs'

在main.js引入axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.prototype.axios = axios;
Vue.use(VueAxios, axios);

在页面js处引入

import axios from 'axios'
import qs from 'qs'

get请求

 
axios.get(url?id=id).then(function(res) {
    var data = res.data;    
     //返回的数据都在res.data里面
}).catch(function(err) {
    console.log(err);
});

post请求

 
var params = {'name':name,'phone':phone};
var qs=require('qs');
var instance = axios.create({
headers: {'content-type': 'application/x-www-form-urlencoded'}
});
instance.post(url,  qs.stringify(params)).then(function(res) {
    var data = res.data;
    //返回的数据都在res.data里面
}).catch(function(err) {
    console.log(err);
});

开始进入正题

首先找到 config/index.js

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}
    },

修改 proxyTable为:

proxyTable: {
      '/api':{
          target:'http://QuanDD.com',   //一定要加上http://  (不然域名会是你前端项目的域名)
          changeOrigin:true,  //允许跨域,
          pathRewrite: {
              '^/api':'/api' //这里用'/api'代替target里面的地址,后面的组建中直接使用api代替
          }
      }

2.找到 config/dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
    API_ROOT:'"/api"'   //本地域名
})

3.找到 config/prod.env.js

module.exports = {
  NODE_ENV: '"production"',
    API_ROOT:'"http://****.com"' //线上后端接口域名
}

4.使用axios调用后端接口

			var baseUrl = process.env.API_ROOT;
                this.$http({                   //$http是在main.js配置的
                    method: 'get',           //请求方式
                    url:'/api/v1/listA',      //只写api后面的接口地址
                    params:{id:this.$route.params.a_id}   //参数
                })
                    .then(res=> {
                        //如果接口走成功就执行这里
                        console.log(res)

                    }).catch(function (err) {
                    //接口失败，也就是state不是200的时候，走这里
                    console.log(err)
                });

以上是实现啦不同环境调用不同的接口,下面接收跨域问题

在服务端域名访问的时候,需要配置nginx
文件地址 : /etc/nginx/conf.d/**.conf
修改为:

server {
        listen       80;
        server_name ********.com;
        root  /data/www/QuanDd/public;
        location / {
            index  index.html index.htm index.php;
                if (!-e $request_filename){
                      rewrite ^(.*)$ /index.php?s=$1 last;
                      break;
            }
        }
        location ~ .php(.*)$ {
	     	 add_header 'Access-Control-Allow-Origin' '*' always;  //添加上这句话
            #fastcgi_pass   127.0.0.1:9000;
	   	 fastcgi_pass unix:/run/php/php7.2-fpm.sock;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
}

OK到此结束,有什么疑问请私信我,随时交流哦!!!