同源策略和跨域解决方案

同源策略和跨域解决方案

一、同源策略

什么是同源策略

同源策略是一种浏览器的安全策略，它限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。同源是指协议、域名和端口号都相同。

同源策略的目的

同源策略的目的是防止恶意网站通过脚本获取用户的敏感信息。但有时候我们需要实现不同源之间的数据交互，这就需要采用跨域解决方案。

什么是跨域？
跨域指的是两个 URL 的协议、域名、端口只要其中一个不一致，就会形成跨域。
出现跨域的根本原因 浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

以下是几种常见的跨域解决方案：

1. JSONP（JSON with Padding）：通过动态创建<script>标签，将需要获取的数据包裹在一个回调函数中返回。由于<script>标签不受同源策略限制，因此可以实现跨域数据的获取。但是JSONP只支持GET请求，且只能获取数据，不能实现POST等其他类型的请求。（很少用）

2. CORS（Cross-Origin Resource Sharing）：服务器设置响应头，允许某个源的请求访问资源。通过设置Access-Control-Allow-Origin等相关响应头，可以实现跨域资源的访问。CORS支持所有类型的请求。CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

3. 代理：通过在服务器端设置代理，将跨域请求转发到目标服务器。浏览器通过访问同源的接口，而代理服务器将请求转发到目标服务器并返回结果。这种方式可以绕过同源策略限制，但需要额外的服务器资源进行代理。

// 项目中vue.config.js文件中设置
devServer: {
    // 代理请求的服务器
    host: '127.0.0.1',
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 跨域
    proxy: {
      // 基准地址/拦截地址
      // 最终路径target+基地址
        target: '请求的目标地址',
        pathRewrite: { '^/api': '/prod-api' },
        changeOrigin: true // 是否允许跨域
    }
    // before: require('./mock/mock-server.js')
  },

以上是一些常见的跨域解决方案，根据具体的使用场景和需求选择合适的方式。