Skip to main content

解决跨域问题

现在我们已经创建完了一个首页的基本样式，但是这个电影信息是我们写死的, 那这显然不行，我们要从接口中来获取数据。但是细心的小伙伴可能会发现了这样的一个问题：我们当前访问的网址是127.0.0.1:8080，而我们前面在写接口的时候，我们使用Postman发送接口，这里的接口信息全都是127.0.0.1:8000，也就是我们后端Django项目提供的这个端口号。

那么这两个端口号不同，这就要涉及到一个问题了，就是跨域的问题。我们无法使用这里的8080这个端口来向这里的后端的8000端口发服务请求。所以咱们需要先解决一下跨域问题。

什么是跨域​

跨域是指在Web开发中，出于安全考虑，浏览器禁止页面中的脚本向不同源（域名、协议或端口号不同）的服务器发起请求。这是浏览器的同源策略，旨在防止恶意文档或者脚本，比如恶意网站的脚本，从不同源获取敏感数据。

图16-跨域

如何解决跨域问题​

那为了解决这个跨域问题，我们通常有两种方式。

第一种，从前端开始解决，使用前端的JS代码进行设置。

第二种，从后端也就是通过Django进行解决。

那在本项目中，我们直接使用前端的方式进行解决。通过配置前端的vue.config.js文件来实现一个设置一个代理，将这里的API这个请求转发到咱们的8000端口去，从而呢，就规避了这个跨域的问题。

OK，我们看一下如何实现。在我们的frontend下面有一个vue.config.js。在这里呢，我们来设置一下，我们配置一下这个代理，然后指定这个/API,让它转发到127.0.0.1:8000/api, 这里。这样的话呢，我们在以后向这个8080端口发请求的时候，它就会找到这里的8000端口，然后找到对应的API进行请求。

代码如下:

vue.config.js
module.exports = {
  devServer: {
      proxy: {
          '/api': {
              target: `http://127.0.0.1:8000/api`,
              changeOrigin: true,
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
};

'代码解析'

这段代码是一个Node.js环境中使用的配置对象，通常用于配置开发服务器的代理。它是用来解决前端开发环境中的跨域问题。具体来说，这段代码定义了一个代理规则，用于将对/api的请求转发到另一个服务器。下面是各部分的具体解释：

  1. devServer: 这是webpack开发服务器的配置对象。在这里，我们定义了开发服务器的额外配置，比如代理设置。

  2. proxy: proxy属性用于定义一个或多个代理规则。这些规则定义了如何将某些API请求从开发服务器转发到实际的后端API服务器。

  3. '/api': 这是一个路径匹配器。它告诉开发服务器：任何URL路径以/api开始的请求都应该被代理到定义在target属性中的服务器。

  4. target: 这个属性定义了要代理到的目标服务器的地址。在这个例子中，目标服务器是http://127.0.0.1:8000/api。这意味着所有匹配/api的请求都会被转发到这个地址。

  5. changeOrigin: 设置为true时，开发服务器会在代理请求时修改HTTP请求头中的host值为目标地址的host值。这通常用于绕过由于host不匹配而引起的一些安全限制。

  6. pathRewrite: 这是路径重写规则。'^/api': ''表示将匹配到的路径中的/api替换为空字符串。举个例子，如果你的前端代码中发出一个请求到/api/user，那么请求会被转发到http://127.0.0.1:8000/api/user，并且因为pathRewrite的设置，最终请求的路径会变成http://127.0.0.1:8000/user。

综上所述，这段代码的主要作用是在本地开发时，将对本地/api路径的请求代理到另一个服务器（在这个例子中是本机的8000端口），解决因跨域限制而无法直接访问后端API的问题。

注意

配置完成以后呢，我们需要重启一下服务，然后它才会生效。这是很多小伙伴在这里经常遇到的一个问题。好，我们ctrl+c一下，然后再来重启，重启服务，然后这个配置才会生效。