跨域的配置及讲解

最新推荐文章于 2024-08-18 11:24:53 发布

幽夜忧伤来袭

最新推荐文章于 2024-08-18 11:24:53 发布

阅读量1.6k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zy1842250045/article/details/122244336

版权

本文介绍了跨域的基本概念，以及在Vue.js项目中如何通过vue.config.js配置跨域代理解决开发环境的跨域问题。同时，文章还探讨了jQuery中的jsonp解决方案，解释了jsonp的工作原理，并提到了CORS作为另一种跨域策略。

摘要由CSDN通过智能技术生成

首先在vue脚手架下创建vue.config.js文件插入代码

// 进行修改默认的webpack配置

module.exports = {
    devServer: {  //开发环境的服务器配置
        // 是否自动弹出浏览器，默认false
        open: false,
        // 修改默认端口，默认8080
        // port: 9090,
 
        proxy: {  //进行代理转发
            '/api': {
                // 转发的网址
                target: "http://m.sirfang.com/api",
                // 是否开启本地代理 默认true
                changeOrigin: true,
                // 重要点
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
 
    }
}

什么是跨域
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

跨域就是指浏览器不允许当前页面的所在源，去请求另一个源的数据

在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的，通过在devServer中的proxy来配置跨域的前缀

跨域的报错提示