vue3.0解决跨域问题Access to XMLHttpRequest at ___has been blocked by CORS policy: No ‘Access-Control-Allowvue3.0解决跨域问题Access to XMLHttpRequest at ___has been blocked by CORS policy: No ‘Access-Control-Allow

简介: vue3.0解决跨域问题Access to XMLHttpRequest at ___has been blocked by CORS policy: No ‘Access-Control-Allow

1,vue3.0根目录下创建vue.config.js文件

2,将代码块写入其中

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://blog.csdn.net/', //接口域名(你请求的第三方接口)
                changeOrigin: true,             //是否跨域 (虚拟的站点需要更管origin)
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api': ''
                }
            }
        }
    }
};

这样就可以在本地访问别的端口号的api接口

3.使用

假如请求的接口地址为 https://blog.csdn.net/weixin_52691965?spm=1001.2101.3001.5343这是我的主页,哈哈哈 ,在调用接口的地方写入如下代码

getData() {
    axis.get('/api/weixin_52691965?spm=1001.2101.3001.5343')//api就是proxy中的target地址
      .then(
       (response) => {
           console.log(response);
       });
},

最后

如果对您有帮助,希望能给个👍评论收藏三连!

想跟博主交朋友的可以通过查找,公_号❤:前端老实人,联系到博主并获取学习资料

博主为人老实,无偿解答问题哦❤

相关文章
|
4月前
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
150 3
|
1月前
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
70 2
|
2月前
|
安全
CORS 跨域资源共享的实现原理是什么?
CORS 跨域资源共享的实现原理是什么?
|
2月前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
|
2月前
|
JavaScript 前端开发 API
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。
|
3月前
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
2月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
3月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
271 7
|
4月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
5月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)

热门文章

最新文章