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

我不是女神ヾ 2022-04-10 14:22 931阅读 0赞

> 注意: 这里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请求

开始进入正题

1.  首先找到 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到此结束,有什么疑问请私信我,随时交流哦!!!