vue 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': ''}}},
```
注意事项：
1. 修改配置后要重启，否则修改不会生效
2. 如果使用了axios之类的ajax框架，注意是否配置了baseUrl，该配置会导致接口匹配不到。
3. 配置的域名和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  的 pathRewriterewrite  ^.+apis/?(.*)$ /$1 break;include  uwsgi_params;// 需要转发的端口，就是后台的域名proxy_pass  http://localhost:3000;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

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

vue proxytable失效的问题解决相关推荐

解决Vue项目打包ProxyTable失效的解决办法
在使用npm run build将项目打包完成之后会发现使用ProxyTable失效,因为该代理跨域的方法只能在本地开发生效解决办法 1.将proxy对应的内容注释掉 2.将项目部署在nginx服务 ...
eclipse配置虚拟路径后，每次启动tomcat都会虚拟路径失效的问题解决
eclipse配置虚拟路径后,每次启动tomcat都会虚拟路径失效的问题解决参考文章: (1)eclipse配置虚拟路径后,每次启动tomcat都会虚拟路径失效的问题解决 (2)https://ww ...
nginx反向代理(proxy_pass)tomcat的过程中，session失效的问题解决
nginx反向代理(proxy_pass)tomcat的过程中,session失效的问题解决参考文章: (1)nginx反向代理(proxy_pass)tomcat的过程中,session失效的问题 ...
记一次升级node版本后，运行原vue项目报错问题解决方法
记一次升级node版本后,运行原vue项目报错问题解决方法参考文章: (1)记一次升级node版本后,运行原vue项目报错问题解决方法 (2)https://www.cnblogs.com/happ ...
Typora编辑MD文档图片失效的问题解决
Typora编辑MD文档图片失效的问题解决 Markdown是一款很流行的文档编辑器,可以用于文档总结,博客编辑等等.我使用了Typora来进行MD的编辑,当然VS CODE也可以,其他的软件也可以. ...
html5 单元格宽度,html table呈现个人简历以及单元格宽度失效的问题解决
正确的实现代码如下: 个人简历个人简历个人资料姓名婚姻照片出生政治面貌性别民族学位移动电话专业电子邮件地址:教育背景2012.9 - 2014.9中国海洋大学本科特长及兴趣爱好篮球.足球 ...
Typora等markdown笔记软件图片链接失效的问题解决办法，图片的相对路径、绝对路径的设置，图片上传到图床的方法
文章目录 -遇到的问题:Typora编辑MD文档,图片失效的问题解决 -解决的方法: 方法一:本地图片,使用相对路径,并将图片放在和md文件的同一目录下步骤1.Typora的图片根目录设置步骤2. ...
jmeter导入jar包后在beanshell中import失效的问题解决
jmeter导入jar包后在beanshell中import失效的问题解决参考文章: (1)jmeter导入jar包后在beanshell中import失效的问题解决 (2)https://www. ...
VUE 输入框disabled颜色问题解决
VUE 输入框disabled颜色问题解决 input[disabled],input:disabled,input.disabled{ -webkit-text-fill-color:#333; - ...

vue proxytable失效的问题解决

vue proxytable失效的问题解决相关推荐

最新文章

热门文章