vue 代理解决跨越方法

2024-05-10 17:30:50

一、什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。
源指协议，端口，域名。只要这个3个中有一个不同就是跨域。

列子：
#协议跨域
http://a.abc.com访问https://a.abc.com；
#端口跨域
http://a.abc.com:8080访问http://a.abc.com:80；
#域名跨域
http://a.abc.com访问http://b.abc.com；

二、本地开发解决跨域方法

在 vue.config.js 中配置devServer

module.exports = {publicPath: '/',outputDir: 'dist',assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)lintOnSave: process.env.NODE_ENV !== 'production',devServer: { //跨域port: "8080", //端口号host: "localhost",open: true, //配置自动启动浏览器proxy: { // 配置跨域处理 可以设置多个'/api': {target: 'http://a.abc.com:8081',//跨域请求头信息changeOrigin: true,ws: false,secure: false, // 如果是https接口，需要配置这个参数pathRewrite: {'^/api': '/'}//pathRewrite: {'^/api': '/'} 重写之后url为 http://a.abc.com:8081/xxxx//pathRewrite: {'^/api': '/api'} 重写之后url为 http://a.abc.com:8081/api/xxxx}}}

发送请求：

axiosF(){this.$axios.get("api/v2").then(res=>{console.log(res)}).catch(err=>{console.log(err)})
}

请求http://localhost:8080/api/v2就会被代理到http://a.abc.com:8081/v2
注意请求后必须添加api否认不会被代理。可以设置 axios 的 baseURL 值
axios.defaults.baseURL = ‘/api’
这样会为所有的请求url 前面都加上 ‘/api’，方便做统一代理。

axiosF(){this.$axios.get("/v2").then(res=>{console.log(res)}).catch(err=>{console.log(err)})
}

三、正式环境中用nginx代理。

nginx.conf文件配置
server {
listen 80;
server_name a.abc.com;
location / {
# 这里是根目录的项目
try_files $uri $uri/ /index.html;
root /home/html/travel/dist;
index index.html index.htm;
}
　　　　　# 这里是需要部署的二级目录应用配置
location ^~/api/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://a.abc.com:8081;
}
}

vue 代理解决跨越方法相关推荐

vue.config.js配置proxy代理解决跨越；proxy代理报404；
像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题. 本文我们是在v ...
Vue代理解决生产环境跨域问题
当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环 ...
Vue代理解决生产环境跨域问题部署必备干货
当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环 ...
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
每天一点点之vue框架开发 - axios解决跨越问题
每天一点点之vue框架开发 - axios解决跨越问题参考文章: (1)每天一点点之vue框架开发 - axios解决跨越问题 (2)https://www.cnblogs.com/cap-rq/p ...
vue学习笔记（四）- cmd无法识别vue命令解决方法
vue学习笔记(四)- cmd无法识别vue命令解决方法参考文章: (1)vue学习笔记(四)- cmd无法识别vue命令解决方法 (2)https://www.cnblogs.com/suRimn ...
Apache 2.4.7在CentOS6.4中安装配置反向代理解决单外网IP对应多个内网主机的方法实践
欢迎转载,转载时请保留全文及出处. Apache 2.4.7在CentOS6.4中安装配置反向代理解决单外网IP对应多个内网主机的方法实践 Apache安装下载源程序(http://httpd.ap ...

最新文章

热门文章