vue proxytable失效的问题解决
在vue的开发过程中,经常会遇到本地调用后台接口的情况,如果后台接口没有做处理的情况下,就会碰到跨域问题,下边是在开发中自己经常用到的跨域解决方案,供大家参考一下:vue-cli配置proxytable:这个配置比较简单,如果使用vue-cli搭建的脚手架,只需要在 根目录/config/index.js 中修改proxyTable属性即可没配置参考:proxyTable: {...
·
在vue的开发过程中,经常会遇到本地调用后台接口的情况,如果后台接口没有做处理的情况下,就会碰到跨域问题,下边是在开发中自己经常用到的跨域解决方案,供大家参考一下:
-
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': '' } } },
注意事项:
- 修改配置后要重启,否则修改不会生效
- 如果使用了axios之类的ajax框架,注意是否配置了baseUrl,该配置会导致接口匹配不到。
- 配置的域名和api能访问到,这个可以现在postman上边测试一下,否则也会导致代理失效。
-
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; } } }
常用的是这两个,程序员节日写博客,感觉浑身散发着光芒,哈哈。
更多推荐
已为社区贡献2条内容
所有评论(0)