vue中解决跨域的方法
vue中的跨域问题
·
在vue项目中,一般我们会遇到跨域的问题,vue项目中解决跨域是非常简单的,我们只需要在项目包自带的服务器, 通过proxy 解决跨域,假设我们需要从虎牙直播或者bilibili直播中获取一些数据,如下代码:
<template>
<div>
<button @click="getData">请求数据</button>
</div>
</template>
<script>
export default {
methods: {
getData() {
// 地址放浏览器, 测试是否能访问:
// const url = 'https://m.douyu.com/api/room/list?page=1'
const url = '/douyu/api/room/list?page=1'
// 跨域报错:
// 发送请求的服务器 和 请求接口所在的服务器 不是同一个
// 解决方案1 CORS: 在接口服务器上添加 白名单, 允许其他来源的访问
// 解决方案2 Proxy: 代理方案, 脚手架生成的这个项目包 支持快速配置代理服务器
this.axios.get(url).then(res => {
console.log(res)
})
// 由于 哔哩哔哩 服务器做了权限设置, 403报错, 无法用代理转换
// var url2 = '/bili/x/web-interface/ranking/region?rid=24&day=7&context='
// this.axios.get(url2).then(res => {
// console.log(res)
// })
},
},
}
</script>
<style lang="scss" scoped></style>
在vue.config.js 文件中的代码如下
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 配置服务器,添加代理选项
// devServer :开发 服务器
devServer: {
//proxy: 代理
proxy: {
// 必须重启服务器, 配置才能生效
// 如果请求地址是 /douyu 开头的, 则被当前代理处理
'/douyu': {
// target: 由服务器帮助到此域名中请求数据 -- 代理
target: 'https://m.douyu.com',
changeOrigin: true, //代表 域名不同,需要启动代理模式
// 路径重写: 真正发送的请求地址中, 要去掉 /douyu 开头
pathRewrite: {
// ^ :正则中的 字符串开头 的意思
'^/douyu': '',
// 如果不替换则发送的请求地址如下: 会多余一个 /douyu
// https://m.douyu.com/douyu/api/room/list?page=1
},
},
// 添加 哔哩哔哩的
'/bili': {
target: 'https://api.bilibili.com',
changeOrigin: true,
pathRewrite: {
'^/bili': '',
},
},
},
},
})
// https://api.bilibili.com
此时会发现虎牙跨域拿取数据成功,但是bilibili失败,403错误,服务器做了权限设置, 403报错, 无法用代理转换,所以代理不是万能的
而且在配置文件修改后,需要重新启动服务器才可以生效,否则依旧会报错
更多推荐
已为社区贡献5条内容
所有评论(0)