vue项目中常见的跨域问题解决
问题1:开发过程中vue项目实现跨域访问的方式
解决方案：
- 在项目根目录下新建
vue.config.js文件，添加如下配置：
module.exports = {devServer: {disableHostCheck: true,//解决跨域问题proxy: {"/api": {target: "http://localhost:8088/server",changeOrigin: true,pathRewrite: {"^/api": ""}}}},
}
- 配置axios的
baseUrl参数
Vue.prototype.axios.defaults.baseURL = "/api";
这样所有的跨域请求，如：http://localhost:8088/server/XXX都通过代理的方式转换为：http://localhost:8080/api/XXX，实际上是把跨域转换为不跨域。
但是这种方案只适用于开发过程中，项目打包部署后，项目中配置的代理将失效。需要使用nginx反向代理将所有的/api请求映射到http://localhost:8088/server上实现
问题2:vue项目打包部署后的跨域访问问题
解决方案：通过配置nginx代理解决，nginx主要配置如下：
server {#监听80端口listen 80;#服务名称server_name localhost;#反向代理，location越靠前优先级越高，所以此项配置必须放在location /之前，否则会失效location /api {#被代理路径，只能是域名或ip：port形式，以/结尾表示用/替换掉/apiproxy_pass http://127.0.0.1:8088;#重写url路径，把/api修改为/dlcsh/server/，其他不变$1表示前边（）中的分组rewrite ^/api/(.*)$ /server/$1 break;}location / {#vue项目路径root /app/web/dist;index index.php index.html index.htm;}
}
重启nginx服务后可通过网络访问。后端项目部署在：127.0.0.1:8088上。另附nginx主要命令
#重新加载特定的nginx配置文件
./nginx -s reload -c /app/nginx/nginx.conf
#关闭nginx服务
./nginx -s stop
#重启nginx服务
./nginx -s reopen
#处理完所有请求后关闭nginx服务
./nginx -s quit
问题3:通过electron-builder打包后跨域访问失效问题的解决
对基于electron-builder插件创建的桌面应用，所有的页面访问都被影射到了文件上，所以配置中的/api访问都会映射到文件上，对vue的网络代理将失效。解决这一问题可以使用electron的方式实现跨域请求，解决方案如下：
- 修改
axios模块的baseUrl属性为真实的url地址
Vue.prototype.axios.defaults.baseURL = "http://localhost:8088/server";
- 在
electron主启动类（我的是background.js文件）中关闭web权限检查
async function createWindow() {const win = new BrowserWindow({...webPreferences: {...//关闭web权限检查，允许跨域webSecurity: false}})//打包后开启控制台//win.webContents.openDevTools();...
}
重新打包项目后即可正常访问。
原创文章，欢迎
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ... 现象 首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ... 以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务 克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ... 下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ... 什么是跨域 正常情况下,我们使用ajax请求的数据都在自己的服务器上.但在一些特定的场景中,我们需要获取到别人的服务器上的数据,也就是在自己的服务器中的ajax要请求到别人的服务器的网址,这就是跨域. ... 现象 首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ... vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ... Java项目中如何解决跨域问题 发布时间:2020-11-11 16:00:40 来源:亿速云 阅读:91 作者:Leah Java项目中如何解决跨域问题?很多新手对此不是很清楚,为了帮助大家解决这个 ... springboot+Vue项目使用axios实现(CROS)跨域 一.项目背景 二.跨域资源共享 CORS 详解 三.axios跨域实现 3.1 安装qs模块 3.2 axios使用 四.sprin ... 一.前言 第一次写vue项目,开发完成.打包上线后,一访问,发现访问后端的请求全部报404.我就纳闷了,跨域问题我已经解决了,怎么就报错了.查阅资料,得知我解决的跨域仅适用于开发环境. ememem. ...vue项目中常见的跨域问题解决相关推荐
最新文章
热门文章