跨域由来

跨域本身是浏览器的安全策略引起的，本身原因是浏览器禁止了非同ip不同端口下的访问。比方说你某天看到了某个服务器地址上福利资源不错，想直接引用到自己网站做引流，结果却一脸懵的提示404，什么情况，直接复制访问明明是可以的？这个当然了不行了，就算浏览器不对你做限制，浏览器也会出手阻止的，要不然都不就乱套了嘛。

开发中跨域问题

跨域距离用户很远，离开发者却很近。你用vue写项目，本地测试连接端口，你打开了localhost:8080，后台小伙伴或者还是你自己动手撸后台打开127.0.0.1:3000，准备开始连接。

控制台提示

看到却不给你的数据

熟不熟悉，没错就是跨域，数据不拿到没有意义呀？那么问题来了，怎么解决跨域。

vue中的proxyTable代理

vue-cli是构建vue项目的基础，类似于后台中的express-generator一样，属于快速搭建项目结构。这个是node的代理功能，可以本地搭建内置服务器，简单理解就是vue-cli附带送的功能。

config/index.js  关于wepack配置涉及打包和底层运行
dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // 可改默认8080
    autoOpenBrowser: true,//每次启动是否自动开浏览器默认不
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    proxyTable:{//代理模式
      '/api':{//碰到/api的就当作暗号接头走转换
        target:'http://127.0.0.1:3000',  // 真实地址
        changeOrigin: true ,// 是否跨域
        pathRewrite:{
          '^/api':''  //实际不存在这个前缀暗号''去掉，有的话就不写
      }
    }
  },

实际请求中axios中接口写法，一般axios涉及请求拦截和响应拦截会单独提出js文件，而api可以单独提出来。

//axios.js
import axios from 'axios';
import qs from 'qs';

// 创建axios实例
const service=axios.create({
    // https://api-m.mtime.cn
    baseURL:'/api',
    timeout:5000,
    // headers:{
    //   'Host':'api-m.mtime.cn'
    // },
    // 处理参数
    transformRequest:[function(data){
      data=qs.stringify(data);
      return data;
    }]
  })
  
  // request拦截器
  ...
  // respone拦截器
  ...
export default service

//api/video.js  video相关的提出来
import Vue from 'vue'
import axios from '../utils/axios'

// 热点轮播图
export const hotBanner=()=>{
 return axios.post('/getHotBanner');
}

//video.vue
import {hotBanner} from '../api/index'
hotBanner.post().then(res=>{console.log(res)}).catch(err=>{console.log(res)})

请求的api接口会通过axios生成的时候带上baseURl这样就可以被识别进行代理了，非常简单的一种方式。还有一种更加简单的，想偷懒的可就注意看了，这块就和后台小伙伴相关了。

node后台中的cross设置

h5有新的cross属性可以告诉浏览器解除限制，后台能做些是什么呢？传输数据是本分，可以进行数据实时推送，强行跳转页面，至于设置cross返回则是小意思。不同后台配置大多差不多。

//express中设置cross访问限制
let express = require('express');
let app = express();
app.all("*",function(req,res,next){
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin","*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers","content-type");
  //跨域允许的请求方式 
  res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == 'options')
      res.send(200);  //让options尝试请求快速结束
  else
      next();
})

在找后台小伙伴友好解决后，就可以不限制你的访问了，具体的选择看个人爱好。再理解完跨域的基本问题后相信，解决肯定不是什么问题。

备注：
跨域基本是由于前期部署地址不一致导致，上线后大多不涉及问题。
protyTable只是解决本地开发的跨域，那不是解决线上不能弄混淆。。