解决Vue的跨域问题

    最近在学习，Flask知识，顺便也了解一下前端的知识，进行前后端一起做项目，然后就比较快的学习Flask，在了解了前端使用axios调用后端的接口时发现接口的状态码一直报CORS，进入接口发现报 No ‘Access-Control-Allow-Origin’ header is present on the requested resource，通过学习了一下发现是跨域的问题，先了解一下什么是跨域

跨域：

    跨域资源共享是一种保护机制，他是使用额外的http的头来告诉浏览器，让运行origin（domain）上的web应用来访问不同服务器上的资源，当一个资源的不同域、端口、协议访问另一个资源，就会产生跨域。

1. 跨域不是一种错误，他是一种保护机制
2. 跨域是保护用户，访问错误一些怀有恶意的网站时，进行信息保护

解决跨域问题的方法

在vue项目中的config/index.js 引入

'/api': {
        target: 'http://192.168.0.102:5000', // 接口地址
        changeOrigin: true, // 是否跨域
        pathRewrite: { // 转发
          '^/api': ''
        },
        secure: false
        },

因为index.js中已经有了相应的内容，所以直接插入即可，如果没有的话，可以试一试创建vue.config.js，然后引入moudle.export里面在插入这些内容（看到很多网上的人用这个方法，我试了一下没有成功，只是提供一个思路。）

然后再在路由处加上（因为后面的获取token我那块没有弄好所以先注释掉，那块注释的地方不是必须要写的）

const debug = process.env.NODE_ENV !== 'production'
const axInstance = axios.create({
  baseURL: debug ? 'api' : 'http://192.168.0.102:5000/ ', //接口地址
  timeout: 10000,
  responseType: 'json',
  withCredentials: false, // 表示跨域请求时是否需要使用凭证
  // headers: {
  //   token: store.state.axios.token,
  //   'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  // }
})

然后运行之后就可以，在页面上看接口的返回值是正常的

感觉兴趣才是最大老师，每天学习一点点，也算是进步，不然以后啥也不知道，就是渣渣了。还是一样女神镇楼

链接: 提供思路的大佬的地址.
链接: 跨域知识了解的地方.