请求跨域_讨论帖

2022年度博客之星前端领域TOP 8

2023-01-17 22:10:45

首先大家来看一张图片

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

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

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

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

// 配置
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中的被代理到