vue20 도메인 간 프록시를 해결하는 방법

웹 개발의 지속적인 개발과 진행으로 인해 점점 더 많은 프런트 엔드 기술과 프레임워크가 널리 사용됩니다. 최신 JavaScript 프레임워크인 Vue.js는 프런트엔드 개발을 위한 인기 있는 선택이 되었습니다. Vue.js 애플리케이션 개발 과정에서 크로스 도메인은 자주 접하게 되는 문제입니다. 이 기사에서는 Vue.js 2.0의 도메인 간 문제와 해당 솔루션을 소개합니다.

1. 크로스 도메인이란

웹 애플리케이션 개발 시, 하나의 도메인 이름을 가진 웹사이트에서 페이지가 다른 도메인 이름의 리소스에 대한 액세스를 요청하면 해당 도메인의 동일 출처 정책 제한으로 인해 해당 리소스를 올바르게 얻을 수 없습니다. 브라우저. 이를 크로스 도메인이라고 합니다.

구체적으로 동일 출처 정책은 브라우저의 핵심이자 가장 기본적인 보안 기능입니다. 동일 출처 정책에서는 두 URL의 프로토콜, 도메인 이름, 포트가 동일한 경우에만 서로 액세스할 수 있도록 허용해야 합니다. 그렇지 않으면 도메인 간 문제가 발생합니다.

일반인의 관점에서 웹사이트를 웹사이트 A라고 하고 다른 웹사이트를 웹사이트 B라고 가정합니다. 웹사이트 A가 브라우저를 통해 웹사이트 B에 데이터를 요청하면 웹사이트 B는 웹사이트 A가 위치한 도메인에 없기 때문에 브라우저는 기본적으로 그러한 액세스 요청은 거부됩니다.

2. Vue.js 2.0의 도메인 간 문제

Vue.js 2.0은 단일 페이지 애플리케이션이므로 기본 개발 및 프로덕션 환경은 개발 및 테스트를 위해 로컬 Node.js 서버를 사용합니다. 이 경우 도메인 간 문제가 자주 발생합니다.

예를 들어 axios를 사용하여 백엔드 서버에서 JSON 데이터를 요청하는 Ajax 요청을 보냅니다.

import axios from 'axios' axios.get('http://localhost:8080/api/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });

위 코드에서http:/ 주소로 요청을 보내려고 합니다. /localhost:8080/api/data서버가 GET 요청을 보내지만 브라우저는 기본적으로 이러한 도메인 간 접근을 허용하지 않기 때문에 런타임 중에 오류가 발생합니다.http://localhost:8080/api/data的服务器发送 GET 请求，但是由于默认情况下浏览器是不允许这种跨域访问的，所以在运行的时候就会出现错误。

三、如何解决跨域问题

为了解决跨域问题，我们需要指定一个代理服务器，在本地启动该服务器，然后把所有的跨域请求都转发到该服务器上。因为代理服务器和后端服务器都在同一个域中，所以就不存在跨域问题了。

在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 中的proxyTable配置项来指定代理服务器。proxyTable 是一个对象，其中的每个属性都是代理规则，形如：

proxyTable: { '/api': 'http://localhost:9000' }

上面的代码中，我们将以/api开头的所有请求都转发到地址为http://localhost:9000的服务器上。

四、示例代码

下面是一个关于如何使用 proxyTable 配置代理服务器的示例代码：

// 代码文件：vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:9000', // 代理目标地址 pathRewrite: { '/api': '' }, // 请求路径重写 changeOrigin: true, // 允许跨域 }, }, }, }

在以上代码中，我们首先需要在 Vue.js 2.0 项目根目录下添加一个vue.config.js文件，该文件用来配置开发环境下的服务器。在devServer中，我们添加了一个proxy属性，该属性是一个对象，里面包含了我们的代理规则。我们可以根据后台 API 的实际情况来设置代理目标地址，例如http://localhost:9000。

我们还可以设置pathRewrite属性，指定请求路径的重写规则。例如，当我们的请求路径为/api/data时，我们可以使用{ '/api': '' }把/api前缀去掉，请求路径变成了/data。

在最后，我们还需要设置changeOrigin属性为true，来允许跨域访问。然后我们就可以愉快地使用 axios 发送跨域请求了：

import axios from 'axios' axios.get('/api/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });

五、总结

本文介绍了 Vue.js 2.0 中的跨域问题及其解决方法。由于同源策略的限制，我们无法直接从前端应用程序中访问其他域名下的资源，但是我们可以使用代理服务器来绕过这个问题。在 Vue.js 2.0 中，我们可以使用 webpack-dev-server 的proxyTable

위 내용은 vue20 도메인 간 프록시를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!