从零开始搭建网站环境（php-yaf nginx mariadb）番外篇——跨域

跨域

先后端分离开发免不了涉及跨域问题，今天就来讲一说它。

固然，这只是我我的的理解，若有错误，欢迎指正

开发环境下的跨域

在Vue中解决跨域：

在前端项目根目录新建 vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.server.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

什么意思呢，简单来讲就是当请求路径中包含 /api 的时候，就把该请求代理到 http://api.server.com 。
不明白？举个例子：
假如我要访问 http://api.server.com 去获取某话题，

axios.get("http://api.server.com/topic/233")

假设你的域名是 server.com，别看只少了 api ，浏览器就是不让你过，是否是很气？
这就是浏览器的同源策略致使的，也就是跨域问题的根源。
可是！nodejs是没有跨域问题的，因而利用这一点，让nodejs去获取数据不就能够了吗？
但愿你不要问nodejs是啥，这个我真的解释不了……
话题转回来，上面的 proxy 配置就是告诉node，当访问路径中有 /api 这个字符串时你就把它接管下来，而后去访问 http://api.server.com 获取数据，而后再把数据给浏览器，Ok，跨域问题解决了！鼓掌~

总的来讲就是，浏览器访问

axios.get("http://server.com/api/topic/233")

node发现有 api 便接管请求，转而去访问 http://api.server.com/topic/233，得到数据后返回给浏览器。
聪明的你或许会问了，路径中的 api 去哪了？
是的，它被吃了，具体来讲是被 pathRewrite 给吃了……

说点题外话，咱们在开发的时候，访问路径通常是 http://localhost:8080/api/topic/233，问题是打包的时候咱们须要把路径换成 http://server.com/api/topic/233，毕竟你的域名不多是localhost， 手动去换不太现实，咱们要配置 webpack 让它开发时用 localhost，发布时用 server.com

在前端项目根目录创建
.env.development（开发环境）

// 开发环境下配置
module.exports = { 
  NODE_ENV = 'development'
  VUE_APP_BASE_API = 'http://localhost:8080'
  VUE_APP_VERSION = '0.0.2'
}

.env.production（生产环境）

// 生产环境下配置
module.exports = { 
  NODE_ENV = 'production'
  VUE_APP_BASE_API = 'http://server.com'
  VUE_APP_VERSION = '0.0.1'
}

简单说一下使用方法（有机会的话细说）：
创建 utils/http.js文件

import axios from 'axios';
// 建立axios实例
var instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 1000 * 12
});
export default instance;

import axios from '@/utils/http';
axios.get("/api/topic/233")

这样，webpack就会自动判断该使用哪一个域名了。

未完待续

目录：
从零开始搭建网站环境（php-yaf nginx mariadb）第一章
从零开始搭建网站环境（php-yaf nginx mariadb）第二章
从零开始搭建网站环境（php-yaf nginx mariadb）第三章