请求跨域_讨论帖

黛琳ghz
全栈领域新星创作者
2023-01-17 22:10:45

首先大家来看一张图片

img

相信上面这张图片大家都不陌生,这就是我们的跨域问题,为什么会出现跨域请求呢?我们先来了解一下浏览器的同源:

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。

所谓同源是指:域名、协议、端口相同。其中一项不相同则就是非同源就会出现跨域!

在Vue中我们常用proxy来解决跨域问题 这里我们以cli3为例 vue.config.js中配置代理,vue.config.js文件是在项目的根目录下 如果没有可以自行创建。

img

// 配置
module.exports = {
publicPath: './',
filenameHashing: true,
productionSourceMap: false,
outputDir: process.env.outputDir,
// chunkFilename: 'js/[chunkname].[chunkhash].chunk.js',
pages: obj,
devServer: {
proxy: {
'/zss': {
target: 'http://172.18.18.995:10000/',
changeOrigin: true,
pathRewrite: {
'^/zss': '/zss'
}
},

        '/vidVisNew': {
            target: 'http://172.18.18.669:9180',
            changeOrigin: true,
            pathRewrite: {
                '^/vidVisNew': ''
            }
        }
    }
},

};
上面这个代理能够生效的前提条件是需要我们在创建Axios的时候需要配置BASE_URL

const zssHttp = axios.create({
timeout: 1000 * 100000,
withCredentials: true,
BASE_URL: '/zss'
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
大家应该可以看出了,我们这里的BASE_URL如果设置为 /zss那么就会在vue.config.js中的被代理到

http://172.18.18.995:10000/

服务,这就是我们vue在开发环境中的代理

...全文
7 回复 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
请求跨域

3

社区成员

社区管理员
  • community_431
加入社区
帖子事件
创建了帖子
2023-01-17 22:10
社区公告
暂无公告