vue proxytable失效的问题解决

在vue的开发过程中，经常会遇到本地调用后台接口的情况，如果后台接口没有做处理的情况下，就会碰到跨域问题，下边是在开发中自己经常用到的跨域解决方案，供大家参考一下：

1. vue-cli配置proxytable：
   这个配置比较简单，如果使用vue-cli搭建的脚手架，只需要在 根目录/config/index.js 中修改proxyTable属性即可没配置参考：

   proxyTable: {
         '/apis': {
         	// 你接口的域名
           target: 'http://xxx.com', 
           // https api域名是https时添加
           secure: false, 	
           // 接口跨域时添加
           changeOrigin: true,
           // 要重写api地址时添加 因为有时候可能是部分接口代理跨域，需要一个能被匹配到的前缀，但是接口并不需要这个前缀，所以需要重写
           pathRewrite: {
           '^/apis': ''
           }
         }
       },
   

   注意事项：

   1. 修改配置后要重启，否则修改不会生效
   2. 如果使用了axios之类的ajax框架，注意是否配置了baseUrl，该配置会导致接口匹配不到。
   3. 配置的域名和api能访问到，这个可以现在postman上边测试一下，否则也会导致代理失效。

2. nginx代理跨域
   实际原理和proxytable相同，都是会起一个web服务，监听端口，然后所有指向后台接口的请求，都先指向中间的代理端口，然后由代理端口转发至后台接口。为什么推荐这个，因为是jq出身，早些时候用nginx做web服务器，有情感在其中吧，哈哈。
   实际配置：

   worker_processes  1;
   events {
       worker_connections  1024;
   }
   http {
       include       mime.types;
       default_type  application/octet-stream;
       sendfile        off;
       keepalive_timeout  65;
   	client_max_body_size 2m;
       server {
           listen       8000;
           server_name  localhost,192.168.1.184;
           add_header 'Access-Control-Allow-Origin' '*';
           location / {
               root   html;
               #index  /page/index.html index.htm;
               index  index.html index.htm;
           }
           // 匹配规则 匹配带有apis前缀的接口
           location /apis {
           	// 重写规则 同proxytable  的 pathRewrite
               rewrite  ^.+apis/?(.*)$ /$1 break;
               include  uwsgi_params;
               // 需要转发的端口，就是后台的域名
               proxy_pass  http://localhost:3000;
           }
           error_page   500 502 503 504  /50x.html;
           location = /50x.html {
               root   html;
           }
       }
   }
   
   

常用的是这两个，程序员节日写博客，感觉浑身散发着光芒，哈哈。