1.什么是跨域?

1.跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

2.浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

3.比如你在www.垃圾网站.com试图通过ajax或者是fetch发起请求访问www.银行.com,并进行某些操作,对比一看主域名不同(垃圾网站/银行),就会被拒绝

4.同一个端口,同一个ip,同一个项目,才能进行访问

2.怎么解决跨域

1.在项目根目录下新建一个vue.config.js文件

2.配置文件内容,api是自己起的路径名字,此时这里配置了路径,你axios封装的根路径,就不需要写后台地址

 

// 配置的意思
module.exports = {
  devServer: {
    // 自动加载这个文件
    // 默认值 为localhost 127.0.0.1
    // 当前端口默认为8080
    host: "localhost",
    // 当前vue服务器的端口
    port: "8081",
    // 默认有的
    // 前端跨域
    proxy: {
      "/api": {
        // 配置你要让那些路径要跨域
        // 你可以让该路径前面添加api
        // login
        // /aa/login
        // 是后台路径
        target: "http://124.221.12.94/wyyl-s/public",
        // true 代表跨域
        changOrigin: true,
        pathRewrite: {
          //重写 login
          "^/api": "",
        },
      },
    },
  },
};

3.配置完成:一定要记得重新启动项目,加载这个vue.config.js文件,不然没有作用.

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐