什么是跨域?

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

怎样解决跨域问题?

解决跨域的三种方法:

  • 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/上边

Scroll Up