解决vue项目中的前端跨域问题

什么是跨域

正常情况下，我们使用ajax请求的数据都在自己的服务器上。但在一些特定的场景中，我们需要获取到别人的服务器上的数据，也就是在自己的服务器中的ajax要请求到别人的服务器的网址，这就是跨域。跨域是浏览器为了安全而做出的策略—》同源策略

同域策略：

即同端口，同域名，同协议

那么如何解决呢，小编整理了三个方案

1. 方案一：cors解决跨域

服务端：设置以下参数,表示允许访问

Access-Control-Allow-Origin：*
//*代表允许所有的域名访问，写www.fyc.com的话就是只允许来自该域名的跨域请求
Access-Control-Allow-Credentials: true
//CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

2. 方案二：jsonp解决跨域

• 下载jsonp插件

npm i jsonp --save

• 引入

import jsonp from "jsonp"

• 使用jsonp解决跨域

// 语法: 
// jsonp(url,callback)  url 请求地址  callback回调函数 两个参数，(err,res) err错误信息，res 返回值 其他用法请去npm

3. 方案三：代理跨域

在vue项目中，与package.json同级创建vue.config.js的入口文件 名字必须是vue.config.js 这是vue-cli在webpack搭建时留的文件入口
vue.config.js配置如下

module.exports={
    devServer:{
        port:"9999", // 设置端口 默认8080
        open:true, // 项目运行自动打开浏览器 偷懒一波
        // 在与port open 设置服务代理
        proxy:{
            // /api 自定义服务代理名字
            "/api":{
                target:"http://localhost:3737", //代理帮助你请求的具体服务
                changeOrign:true, // 开启代理
                pathRewrite:{  // 格式化path 
                    "^/api":""
                }
            }
        }
    }
}

请求设置：把请求地址中的服务http://licalhost:3737改为/api (在代理服务配置中自己定义的服务代理名)

 this.axios({
            url:"/api/user/one",
            method:"get"
        }).then((res)=>{
            console.log(res)
        })

注意：如果服务代理不设置格式化path会访问不到，报错，因为最终访问的地址是http://localhost:3737/api/user/one 所以需要格式化path，把请求地址中的/api设置为空，如果一样可以忽略