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上边测试一下，否则也会导致代理失效。

4. 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;
        }
    }
}

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