在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;
            }
        }
    }
    
    

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

Logo

前往低代码交流专区

更多推荐