vue利用axios处理开发环境和生成环境的跨域问题

怼烎@ 2022-06-04 04:29 586阅读 0赞

1.跨域，是一个需要前后端一起解决的服务器问题，在vue-cli的webpack有解决这个问题的功能。  
例如前端向后台服务器（[http://localhost/echoIp/index.php][http_localhost_echoIp_index.php]）发送一个请求，然后将收到的数据打印到页面。  
那么由于开发环境不在这个服务器上，所以就会产生跨域的问题。于是我们需要用到axios及修改配置文件。  
请求页面的代码如下：

created(){
        this.testaxios();
      },
    methods:{
        testaxios(){
            axios.post(
              "/echoIp/index.php", 
                  {
       'id':111111111}, 
                  { headers: {
                      'Content-type': 'application/json',
                  }
              }).then(res=>{
                console.log(res)
                this.content=res.data;
              })
        }
    }

配置文件的代码如下：

dev: {
       // Paths
       assetsSubDirectory: 'static',
       assetsPublicPath: '/',
       proxyTable: {  
               '/': {  
                   target: 'http://localhost',  
                   changeOrigin: true,  
                   pathRewrite: {  
                       '^/': ''  
                   }  
               }
          },
       host: 'localhost', 
       port: 8080, 
       autoOpenBrowser: false,
       errorOverlay: true,
       notifyOnErrors: true,
       poll: false, 
       useEslint: true,
       showEslintErrorsInOverlay: false,
       devtool: 'eval-source-map',
       cacheBusting: true,
       cssSourceMap: false,
     },

这样配置就可以解决开发环境下的跨域问题。  
![这里写图片描述][SouthEast]

2.项目完成后如何导出线上的版本呢！？  
利用npm run build 就可以导出一个dist文件夹，将该文件夹放到服务器上运行里面的index.html就可以把整个项目运行起来了，如果报错的话，那么你需要修改配置文件build:\{\}里面的assetsPublicPath，修改成

assetsPublicPath: './',

3.代理设置的作用是你要访问后端的请求直接发到当前站点，因此你的 api 路径都应该是不含 hostname 的相对路径  
部署到生产环境时，只要相对路径保持不变，就不需要任何设置。  
如果开发环境下的 api 路径和生产环境的路径不一致，那么一定可以通过设置 proxyTable 使之一致。  
因此，结论是，只要 proxyTable 设置得好，部署上线不需要做任何改动。

[http_localhost_echoIp_index.php]: http://localhost/echoIp/index.php
[SouthEast]: /images/20220604/f645fb79f3c84ef7b8f54b7108432e25.png