vue 和 uniapp配置跨域代理

几天没有写博客了,原因是除了工作以外,在搭写uni的一些基本架子~方便使用,测试requst请求本地接口,就跨域了,就去查了一下和vue跨域有什么不同,再此记录
·····································································································

  1. Vue跨域

在vue.config.js 里

"devServer" : {
  "port" : 9000,       //默认端口号
  "disableHostCheck" : true, 
  "open":true,   // 是否自动打开浏览器
  "proxy": {
    "/api": {
      "target": "http://localhost:3000",  //你要跨域的地址
      "changeOrigin": true,          // 是否改变
      "secure": false,          //https配置
      "pathRewrite": {
						"^/api": ""             // 将api替换为'',因为接口本身不带api
					}
    },
    "/api2": {
     .....
    }
  }, 
},

然后 接口请求为 http://localhost:3000/123 的话,url只需要来个 /api/123

  1. Uniapp跨域
    在 manifest.js 文件里,嗯。。。其实没什么不同,就是文件不同,多了一个"h5"
	"h5" : {
        "devServer" : {
            "port" : "3001",
			"disableHostCheck" : true,
			"open":true,
            "proxy" : {
                "/api" : {
                    "target" : "http://localhost:3000",
                    "changeOrigin" : true,
                    "secure" : true,
					"pathRewrite": {
						"^/api": ""
					}
				}
			}
		}
    }

这种方法只在测试阶段管用,上线可以叫后台配nginx反向代理,当然也可以自己学,过些天完善基础功能后,会在记录几个有趣的小功能~

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: UniApp 是一款基于 Vue.js 的跨平台开发框架,可以使用一套代码开发同时运行在多个平台,例如 H5、小程序、App 等。如果想要进行跨域配置,需要在后端接口中进行配置,具体的操作步骤如下: 1. 在后端代码中设置允许跨域访问,一般可以使用 node.js 中的 `cors` 模块来进行配置,也可以手动设置相关的响应头信息来实现跨域访问。 2. 如果使用了 uni-ajax 或者 uni-request 进行接口请求,需要在请求中设置 `withCredentials: true`,以支持带上 cookie 进行跨域访问。 3. 在 UniApp 中使用 uni.request 发送请求时,需要将请求的地址改为绝对路径,并在地址前加上协议和域名,例如:`http://www.example.com/api/getData`。 以上就是在 UniApp 中进行跨域配置的一般步骤,需要注意的是不同的后端语言和框架可能存在差异,具体的操作方式需要根据实际情况进行调整。 ### 回答2: 在UniApp中解决跨域问题,可以通过修改项目中的配置文件来实现。具体步骤如下: 1. 打开项目根目录下的 `manifest.json` 文件。 2. 在 `manifest.json` 文件中,找到 `"networkTimeout"` 字段,如果不存在则手动添加。 3. 在 `"networkTimeout"` 字段下添加 `"request"` 字段,用于配置请求超时时间。例如: ```json "networkTimeout": { "request": 10000 } ``` 这里的 `"request"` 表示请求的超时时间,单位为毫秒。根据需要,可以自行调整超时时间。 4. 在 `manifest.json` 文件中,找到 `"uni-app"` 字段,如果不存在则手动添加。 5. 在 `"uni-app"` 字段下添加 `"server"` 字段,用于配置跨域解决方案。例如: ```json "uni-app": { "server": { "disableHostCheck": true, "proxy": { "/api": { "target": "https://api.example.com", "changeOrigin": true, "pathRewrite": { "^/api": "" } } } } } ``` 这里的 `"proxy"` 表示代理配置,`"/api"` 表示请求地址中以 `"/api"` 开头的请求会被代理到指定的 `"target"` 地址。`"changeOrigin"` 表示是否改变请求的来源,默认为 `false`,设置为 `true` 可以解决跨域问题。`"pathRewrite"` 表示重写请求的路径,这里的配置表示将 `"/api"` 替换为空字符串。 以上就是使用 UniApp 解决跨域问题的配置代码。配置完成后,重新运行项目即可生效。 ### 回答3: 在Uni-app中解决跨域问题,可以通过在项目的manifest.json文件中进行配置。 首先,打开manifest.json文件,找到"wechat"字段下的"setting"对象,然后在其中添加"cors"字段。如下所示: ``` "wechat": { "setting": { "cors": { "enable": true, "origin": "*", "showToast": true, "showLoading": false, "timeout": 30000, "credentials": "include" } } } ``` 在这个配置中,enable表示是否开启跨域,设置为true表示开启;origin表示允许跨域请求的地址,设置为*表示允许所有地址;showToast表示是否显示跨域请求错误的提示信息;showLoading表示是否显示加载状态;timeout表示请求超时时间;credentials表示是否允许携带跨域请求的认证信息。根据实际需求,进行相应的配置修改。 配置完成后,保存manifest.json文件,重新编译运行项目即可。 另外,需要注意的是,以上配置只对微信小程序有效。如果需要在其他平台中解决跨域问题,可以参考各平台的官方文档进行配置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值