{"action":"opened","issue":{"url":"https://api.github.com/repos/Krryxa/WORK-LEARNING/issues/23","repository_url":"https://api.github.com/repos/Krryxa/WORK-LEARNING","labels_url":"https://api.github.com/repos/Krryxa/WORK-LEARNING/issues/23/labels{/name}","comments_url":"https://api.github.com/repos/Krryxa/WORK-LEARNING/issues/23/comments","events_url":"https://api.github.com/repos/Krryxa/WORK-LEARNING/issues/23/events","html_url":"https://github.com/Krryxa/WORK-LEARNING/issues/23","id":347427441,"node_id":"MDU6SXNzdWUzNDc0Mjc0NDE=","number":23,"title":"跨域","user":{"login":"Krryxa","id":37185773,"node_id":"MDQ6VXNlcjM3MTg1Nzcz","avatar_url":"https://avatars3.githubusercontent.com/u/37185773?v=4","gravatar_id":"","url":"https://api.github.com/users/Krryxa","html_url":"https://github.com/Krryxa","followers_url":"https://api.github.com/users/Krryxa/followers","following_url":"https://api.github.com/users/Krryxa/following{/other_user}","gists_url":"https://api.github.com/users/Krryxa/gists{/gist_id}","starred_url":"https://api.github.com/users/Krryxa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Krryxa/subscriptions","organizations_url":"https://api.github.com/users/Krryxa/orgs","repos_url":"https://api.github.com/users/Krryxa/repos","events_url":"https://api.github.com/users/Krryxa/events{/privacy}","received_events_url":"https://api.github.com/users/Krryxa/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-08-03T14:52:03Z","updated_at":"2018-08-03T14:52:03Z","closed_at":null,"author_association":"OWNER","body":"# 跨域\r\n\r\n## 了解同源政策：所谓\"同源\"指的是\"三个相同\"。\r\n\r\n- 协议相同\r\n- 域名相同\r\n- 端口相同\r\n\r\n## 解决跨域\r\n1. jsonp 缺点：只能get请求 ，需要修改B网站的代码\r\n2. cors 这个方案缺点 是 ie6 7 兼容不好（倒是不见得要兼容）。需要B网站在响应中加头\r\n3. postMessage 缺点也是 ie6 7 兼容不好（倒是不见得要兼容）。需要修改B网站的代码\r\n4. iframe window.name 传值得方式很巧妙，兼容性也很好。但是也是需要你能修改B网站代码\r\n5. 服务端主动请求B网站，兼容性好而且你客户端的代码还是原来的ajax，缺点是感觉不好。（服务器端是不存在跨域安全限制的）\r\n6. 类似5 用nginx把B网站的数据url反向代理。\r\n\r\n## jsonp 解决跨域\r\n- 使用JSONP 模式来请求数据的整个流程：\r\n> 客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供 success 属性方法来调用，而不是传递的一个回调句柄），服务器端接受了这个 backfunc 函数名，然后把数据通过实参的形式发送出去\r\n- 使用 JSONP 模式来请求数据的时候服务端返回的是一段可执行的 JavaScript 代码。\r\n- jsonp 跨域的原理：\r\n> 因为 script、img、link 等标签是可以跨域的。所以可以利用 script 标签（动态创建）来向服务器发送请求，服务器端接收到请求后返回一段可执行的 js 代码，调用客户端写好的方法，并把 JSON 数据传入该方法中，客户端即可拿到数据。所以 jsonp 只支持 get 请求（通过 script 的 url 请求）\r\n\r\n## node， express 解决跨域\r\n- 加上请求头：\r\n```javascript\r\napp.all('*', (req, res, next)=>{\r\n    res.header(\"Access-Control-Allow-Origin\", \"*\");\r\n    res.header(\"Access-Control-Allow-Headers\", \"Content-Type,Content-Length, Authorization, Accept,X-Requested-With\");\r\n    res.header(\"Access-Control-Allow-Methods\",\"PUT,POST,GET,DELETE,OPTIONS\");\r\n    res.header(\"X-Powered-By\",' 3.2.1')\r\n\r\n    if(req.method==\"OPTIONS\") res.send(200);/*让options请求快速返回*/\r\n    else next();\r\n});\r\n```\r\n\r\n## 重点说一下vue-cli处理跨域\r\n- 前后端分离的项目，常常开发的时候，请求的接口地址存在跨域问题\r\n- webpack 前后端分离开发接口调试解决方案，proxyTable解决方案\r\n- 首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，自然而然是要配置在dev里面：\r\n```javascript\r\nport: 8080,\r\nproxyTable: {\r\n  '/api': {\r\n    target: 'http://www.ainyi.com',  // 目标接口域名\r\n    changeOrigin: true,  // 是否跨域\r\n    // secure: false,  // 如果是https接口，需要配置这个参数\r\n    pathRewrite: {\r\n      '^/api': ''   // 重写接口，一般不更改\r\n    }\r\n  },\r\n},\r\n```\r\n- '/api' 为匹配项，target 为被请求的地址\r\n- 以上代码表示：只要是http://www.ainyi.com/api的接口，都将被本地8080端口的请求代理：\r\n    > http://localhost:8080/api ===> http://www.ainyi.com/api\r\n- 也就是说，想请求接口http://www.ainyi.com/api，就是通过http://localhost:8080/api代理访问，就不会产生跨域。\r\n- 这样就不需要在axios配置axios.defaults.baseURL，所有接口都由本地代理了"}}
{"actor":{"display_login":"Krryxa"}}