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

3. 교차 도메인 문제를 해결하는 방법🎜🎜교차 도메인 문제를 해결하려면 프록시 서버를 지정하고 로컬에서 서버를 시작한 다음 모든 교차 도메인 요청을 서버로 전달해야 합니다. 프록시 서버와 백엔드 서버가 모두 동일한 도메인에 있으므로 도메인 간 문제가 없습니다. 🎜🎜Vue.js 2.0에서는 webpack-dev-server의 proxyTable 구성 항목을 사용하여 프록시 서버를 지정할 수 있습니다. ProxyTable은 객체이고, 그 안의 각 속성은 다음 형식의 프록시 규칙입니다. 🎜rrreee🎜위 코드에서는 /api로 시작하는 모든 요청을 서버의 주소로 전달합니다. http://localhost:9000에 있습니다. 🎜🎜4. 샘플 코드🎜🎜다음은 ProxyTable을 사용하여 프록시 서버를 구성하는 방법에 대한 샘플 코드입니다.🎜rrreee🎜위 코드에서 먼저 루트 디렉터리에 vue.config를 추가해야 합니다. 개발 환경에서 서버를 구성하는 데 사용되는 Vue.js 2.0 프로젝트 .js 파일. devServer에서는 프록시 규칙이 포함된 개체인 proxy 속성을 ​​추가했습니다. http://localhost:9000와 같이 백엔드 API의 실제 상황에 따라 프록시 대상 주소를 설정할 수 있습니다. 🎜🎜pathRewrite 속성을 ​​설정하여 요청 경로에 대한 다시 쓰기 규칙을 지정할 수도 있습니다. 예를 들어 요청 경로가 /api/data인 경우 { '/api': '' }를 사용하여 /api를 넣을 수 있습니다. 접두사가 제거되고 요청 경로는 /data가 됩니다. 🎜🎜마지막으로 교차 도메인 액세스를 허용하려면 changeOrigin 속성을 ​​true로 설정해야 합니다. 그런 다음 axios를 사용하여 도메인 간 요청을 보낼 수 있습니다. 🎜rrreee🎜 5. 요약 🎜🎜이 기사에서는 Vue.js 2.0의 도메인 간 문제와 해당 솔루션을 소개합니다. 동일 원본 정책의 제한으로 인해 프런트 엔드 애플리케이션에서 다른 도메인 이름의 리소스에 직접 액세스할 수 없지만 프록시 서버를 사용하여 이 문제를 우회할 수 있습니다. Vue.js 2.0에서는 webpack-dev-server의 proxyTable 구성 항목을 사용하여 프록시 서버를 지정하여 도메인 간 문제를 해결할 수 있습니다. 🎜

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