分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

vue项目开发,用webpack配置解决跨域问题

发布时间:2023-09-06 01:56责任编辑:熊小新关键词:配置webpack跨域

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理。

1,后端更改header

header(‘Access-Control-Allow-Origin:*‘);//允许所有来源访问 header(‘Access-Control-Allow-Method:POST,GET‘);//允许访问的方式 

2,使用jsonp进行跨域

getData () { ????var self = this ????$.ajax({ ??????url: ‘http://f.apiplus.cn/bj11x5.json‘, ??????type: ‘GET‘, ??????dataType: ‘JSONP‘, ??????success: function (res) { ????????self.data = res.data.slice(0, 3) ????????self.opencode = res.data[0].opencode.split(‘,‘) ??????} ????}) ??} 

3,使用webpack反向代理(项目中使用vue-cli脚手架搭建)

1,在config/index.js中的proxyTable添加如下代码:

proxyTable: { ?????‘/gp‘: { ???????target: ‘http://10.0.67.65/uat_branch/IspWeb/‘, ???????changeOrigin: true, ???????pathRewrite: { ?????????‘^/gp‘: ‘‘ ???????} ?????} ???},

在公共的apiConfig中加入跨域的环境:

case 5: ?????//跨域环境 ?????apiObj.baseUrl = ‘/gp/‘; ?????apiObj.File_upload_URL = ‘‘; ?????break

至此所有的请求接口类似:http://localhost:8080/gp/api/v1.0/user/login

 尝试请求后发现该接口地址404,后发现:代理设置完成后需要重新 npm run dev

  

vue项目开发,用webpack配置解决跨域问题

原文地址:https://www.cnblogs.com/tangjiao/p/9101747.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved