前端跨域解决方案

什么是跨域？

• 跨域是浏览器为了安全而做出的限制策略
• 浏览器请求必须遵循同源策略：同域名、同端口、同协议

怎样解决跨域问题？

解决跨域的三种方法：

• CORS跨域
• JSONP跨域
• 代理跨域

CORS跨域：

CORS跨域前端不用进行设置，后端直接添加上一段代码就可以

后端直接设置允许某个域名进行访问

header('Access-Control-Allow-Origin:https://segmentfault.com')

或者允许所有域名进行访问

header('Access-Control-Allow-Origin:*')

JSONP跨域：

JSONP跨域需要前端和后端同时设置

前端：

安装jsonp插件

npm i jsonp

引入需要进行jsonp请求的文件

<script>
import jsonp from 'jsonp'
export default {
  mounted() {
    let url = "http://localhost/zuoye/jsonp.php";
    jsonp(url,(err,res)=>{
      console.log(res);
    })
  }
};
</script>

后端：

<?php
//服务端返回JSON数据  
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
$result=json_encode($arr);  
//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)"; 
?>

然后我们打开控制台就可以看到数据啦。

代理跨域

前端修改nginx服务器配置，后端不动。

比如我们本地服务是http：//127.0.0.1.8080，我们想要请求http：//127.0.0.1.9090/getData接口

在vue.config.js里面：

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: "http：//127.0.0.1.9090",<!--请求的接口-->
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }
}

在请求的页面：

axios.get("api/getData")
      .then((data)=>{
        console.log(data);
      })

此时，虽然请求发送到了：http://localhost:8080/api/getData/,但是已经代理到了http：//127.0.0.1.9090/getData/上边