同源 跨域与前端解决跨域

同源策略

在浏览器中协议,域名,端口号三者保持一致则为同源

同源策略 是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

跨域

因违反同源策略像服务端发出的ajax请求则为跨域请求

常见的几种解决方式

1 .JSONP跨域

因为script标签是不存在跨域的,可以通过JSONP像服务器发送get请求,服务器端将服务器返回的数据保存到回调函数中以供前端页面使用

2. websocket协议

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。 原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

3.Vue React工程化项目使用proxy代理

webpack代码示例

module.exports = {
    devServer: {
        proxy: {
          "/api": {  //拦截访问链接中/api以前的路径
            target: "http://47.108.203.155:8080",//转接到目标服务器
            changeOrigin: true,
            pathRewrite: {
              "/api": "",  // 因为/api是我特殊加的 所以这里把/api重定向为空
            },
          },
        },
    }
}