vue开发阶段跨域问题---通过配置解决

跨域问题

出于浏览器的同源策略限制,同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常的功能可能会受到影响,跨域收是Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互,所谓同源(即指同一个域)就是两个页面具备同样的协议(protocol),主机(host)和端口号(port )，我这里采用配置通过proxy代理解决

第一步

在项目根目录下创建vue.config.js文件

如下：

module.exports={
        devServer:{
            //跨域
            proxy:{
                '/api':{
                    //目标地址
                    target:"http://localhost:9999/",
                    //允许跨域
                    changeOrigin:true,
                    //重写路径
                    pathRewrite:{
                        '^/api':''
                    }
                }
            }
        }
}

应用是将http://localhost:9999用api代替即可

但是我这里出了问题：

解决：

1.在前端部分的项目目录里面，找到配置文件package.json

本来是这样的：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

改为：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "node index.js",
    "server": "nodemon index.js --ignore client"
  },

问题解决！！！！！