教你如何处理vue上线跨域问题

发布时间：2023-09-08 11:30:18 所属栏目：教程来源：互联网

导读： 　　这篇“如何处理vue上线跨域问题”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所

　　这篇“如何处理vue上线跨域问题”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何处理vue上线跨域问题”文章吧。

　　什么是跨域

　　跨域是指在访问一个服务器上的资源时，使用的是跨域请求的方式。跨域请求有很多种，其中常见的有跨域访问资源、跨域写cookie、跨域调用接口等。在浏览器安全策略之下，跨域请求是默认禁止的，因为跨域请求可能带来安全风险。

　　解决Vue上线跨域问题

　　1.代理服务器

　　代理服务器是通过在前端请求后台接口时，将请求转发到接口所在的服务器上，在前端代码中使用代理服务器的地址作为请求路径，保证请求正常进行。利用代理服务器，前端能够实现对接口的请求转发，可以对后端接口的返回内容进行代理，修改返回内容，同时能够在请求前、请求后加一些修改性参数或处理逻辑。代理服务器大都是后端人员编写，前端项目调用即可。

　　代理服务器有很多种，例如Nginx、阿里云API网关、Apache等等。在Vue项目上线时，使用代理服务器将所有接口的访问路径指向同一个域名，例如将所有接口请求路径重定向到“/api”，使用“/api”作为请求路径。然后在代理服务器上定义一个转发规则，将以“/api”开头的请求转发到后端接口所在的服务器上就可以解决跨域问题。

　　在Vue项目中配置代理服务器：

　　//vue.config.js

　　module.exports = {

　　 devServer: {

　　    proxy: {

　　      '/api': {

　　        target: 'http://localhost:8080',

　　        changeOrigin: true, //是否跨域

　　        pathRewrite: {

　　          '^/api': '/'

　　        }

　　      },

　　    }

　　 }

　　}

　　2.jsonp

　　JSONP是JavaScript和跨域请求的一种解决方案。客户端通过动态创建<script>标签，添加需要请求的URL（接口地址）以及回调函数作为参数，发送请求到服务器。服务器端接受请求后，返回一个JavaScript脚本，callback函数并携带需要的数据。最后客户端在回调函数中对返回的数据进行处理。JSONP是一种比较灵活的跨域解决方式，但是它只能支持GET请求，并且只能请求纯文本格式的数据。

　　在Vue项目中使用JSONP：

　　this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现

　　    city: '上海',

　　    appkey: 'your appkey'

　　 }, (data) => {

　　    console.log(data)

　　 })

　　3.CORS

　　CORS（跨域资源共享）是跨域请求的一种官方解决方案，它可以让Web应用服务器进行跨域访问控制，从而使浏览器安全地完成跨域请求。使用CORS，只需要在后台的响应头信息中增加Access-Control-Allow-Origin字段，并设置为'*'或指定的域名即可，然后浏览器会根据响应头信息进行处理，从而达到解决跨域请求的问题。

　　在后台增加响应头信息：

　　//以Java Web服务为例，增加响应头信息

　　response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域

　　WebSocket

　　WebSocket是一种全双工通信协议，在跨域请求中起到了很好的解决作用。WebSocket通过HTTP协议进行握手，创建连接后，数据可以在客户端和服务器之间进行双向传输。

　　在Vue项目中使用WebSocket：

　　var ws = new WebSocket('ws://localhost:8080');

　　ws.onopen = function() {

　　 ws.send('发送消息到服务器');

　　};

　　ws.onmessage = function(event) {

　　 console.log('从服务器接受到 ', event.data);

　　}

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!