vue跨域前端怎么解决(常用解决跨域的方法)

397 阅读1分钟

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了。

跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,同源是指:域名、协议、端口相同

img_v2_c71edbbe-7e3a-4a49-bd50-9872c1ae35cg.jpg

解决跨域有很多方法:

比如VUE2.0中常用proxy来解决跨域问题 比如JSONP解决跨域 比如iframe实现跨域 或者让后端在接口配置下白名单。。。

以上我都略过! 今天分享的是我常用的ng解决跨域的方法

静态服务器 - Nginx

Nginx (engine x) 是一个高性能的HTTP反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。

Nginx安装

安装步骤

懒得看没关系,其实就是一个这样的文件夹

image.png

安装ngnix后,打开nginx.conf

添加如下:

启用nginx,在nginx-1.18.0文件夹输入栏中输入cmd输入nginx回车即可

image.png

前端项目中接口地址如下:

image.png

其中 http://10.2.46.135:8081/audits 是后端接口地址

然后打开前端页面http://10.2.46.135:8081/ ,即解决跨域

如果你是vue项目解决跨域也同上面一样,vue有公用的httpConfig配置文件,如下

image.png

启动后输入 http://localhost:8080/ ,页面上想使用固定域名的接口,比如api-sit.myki.com:8080/v1/order/xx… , 具体如下

image.png

image.png

vue怎么解决跨域呢

打开nginx.conf,添加如下:

image.png

启用nginx,在nginx-1.18.0文件夹输入栏中输入cmd输入nginx回车即可

vue前端打开链接 http://localhost:8085/ ,就能解决了

image.png

赶快验证下吧,如有问题请留言