同源和跨域

目录

同源

        1.什么是同源

        2.同源策略的目的

        3.同源策略带来的影响

跨域

        1.什么是跨域

        2.解决跨域的方法

                1.jsonp方式                

                2.cors方式

                3.代理转发

---

同源

        1.什么是同源

                同源是指在url中 协议，域名，端口号都相同

        2.同源策略的目的

                保证用户信息的安全，防止恶意网站窃取数据

        3.同源策略带来的影响

                发送ajax请求时，会出现跨域问题

跨域

        1.什么是跨域

                跨域是指两个url的 协议，域名，端口号有不同

        2.解决跨域的方法

                1.jsonp方式                

                需要前端和后端同时支持

                前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据

                后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行调用函数名,                 并传递数据

                2.cors方式

                后端需要开启cors                 

                实际上就是在响应头添加允许跨域的源

                Access-Control-Allow-Origin: 字段和值(意思就是允许去哪些源地址去请求这个服务器)

                3.代理转发

                在vue.config.js配置文件中      

module.exports = {
  devServer: {
    // ... 省略
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
}

【注】代理转发在生产环境中无效