vue项目中常用解决跨域的方法

时间：2022-11-26 01:30:00 传感器ljc20a4

一、跨域是什么？

跨域问题的出现是由于浏览器的同源策略问题。所谓的同源必须有以下三个相似之处：相同的协议、相同的主机和相同的端口。如果其中一个不同，即非同源请求，则会产生跨域。当我们要求接口时，它会出现：Access-Control-Allow-Origin 字眼说明要求跨域。

二、如何解决跨域问题？

跨域解决方案：

jsonp
cors
Node中间件代理(两次跨域) 即 Proxy
nginx反向代理 CORS支持所有类型HTTP请求是跨域HTTP请求的基本解决方案
JSONP只支持GET请求，JSONP优点是支持老式浏览器，不支持CORS网站请求数据。
不管是Node中间件代理还是nginx反向代理主要通过同源策略不限制服务器。
在日常工作中，使用较多的跨域方案是cors和nginx反向代理

主要解释CROS和Proxy两种方式

1、CROS

CROS是 Cross-Origin Resource Sharing缩写和翻译意味着跨域资源共享。它由一系列传输HTTP头部组成，这些HTTP头会决定浏览器是否阻止前端 JavaScript跨域请求响应代码。
CORS实现相对简单方便，只需增加一些 HTTP只要后端实现，服务器就可以声明允许的访问源。 CROS跨域实现。

2、Proxy（代理）

代理转发目标服务器通过启动本地服务器。跨域只针对浏览器，针对浏览器node服务发出的请求不会域，从而解决跨域问题。
在vue.config.js文件

1.可配置多种不同的配置proxy

devServer: { 
             proxy: { 
               '/api': { 
        //代理标志通常是每个接口前的相同部分         target: 'http://23.15.11.15:8000', // 这是访问界面的域名和端口号         changeOrigin: true, // 允许跨域请求         pathRewrite: { 
         // 重写路径，替换请求地址中的指定路径           '^/api': '/user'         }       },       '/login': { 
            target: 'http://23.15.11.15:8000',    changeOrigin: true,    pathRewrite:{ 
              '^/login':''  ///替换空    }     }     }   },

示例：

http://localhost:8080/api/test --> http://23.15.11.15:8000/user/test
http://localhost:8080/login/index–> http://23.15.11.15:8000/index

2.代理所有接口

devServer: { 
          proxy: 'http:/www.ljc.com' }

示例：

http://localhost:8080/api/test --> http://www.ljc.com/api/test
http://localhost:8080/login/index–> http:/www.ljc.com/login/index

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

vue项目中常用解决跨域的方法

相关文章