text: "use strict";(self.webpackChunkvuepress_blog=self.webpackChunkvuepress_blog||[]).push([[68841],{29852:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-17616a90",path:"/typora/01frontEnd/10Webpack/26CORS%E8%B7%A8%E5%9F%9F%E4%B8%8A.html",title:"26 CORS跨域上",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"01 说明",slug:"_01-说明",children:[]},{level:2,title:"02 启动node服务器",slug:"_02-启动node服务器",children:[]},{level:2,title:"03 前端打包启动serve",slug:"_03-前端打包启动serve",children:[]},{level:2,title:"04 配置",slug:"_04-配置",children:[]}],filePathRelative:"typora/01frontEnd/10Webpack/26CORS跨域上.md",git:{updatedTime:1637228675e3}}},73045:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(36425).uE)('<h1 id="_26-cors跨域上" tabindex="-1"><a class="header-anchor" href="#_26-cors跨域上" aria-hidden="true">#</a> 26 CORS跨域上</h1><h2 id="_01-说明" tabindex="-1"><a class="header-anchor" href="#_01-说明" aria-hidden="true">#</a> 01 说明</h2><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--\n1.前端跨域问题?\n同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能\n所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域\nhttp://127.0.0.1:8080\nhttp://127.0.0.1:8080  // 同源\n\nhttp://127.0.0.1:8080\nhttp://127.0.0.1:9090  // 跨域\n\n2.利用webpack-dev-server代理解决跨域问题\ndevServer: {\n        contentBase: &quot;./dist&quot;,\n        open: true,\n        port: 9090,\n        proxy: {\n            // 所有API开头的请求都会被代理到target\n            // 例如: 我们发送请求地址: http://127.0.0.1:9090/api\n            //       实际发送请求地址: http://127.0.0.1:3000/api\n            &quot;/api&quot;: {\n                target: &quot;http://127.0.0.1:3000&quot;, // 代理地址\n                changeOrigin: true,     // 域名跨域\n                secure: false,          // https跨域\n            }\n        }\n    }\n\ndevServer: {\n    contentBase: &quot;./dist&quot;,\n    open: true,\n    port: 9090,\n    proxy: [{\n            context:[&quot;/api&quot;, &quot;/login&quot;],\n            target: &quot;http://127.0.0.1:3000&quot;, // 代理地址\n            changeOrigin: true,     // 域名跨域\n            secure: false,          // https跨域\n    }]\n}\n\n3.利用webpack-dev-server重写请求路径\nproxy: [{\n        context:[&quot;/api&quot;, &quot;/login&quot;],\n        target: &quot;http://127.0.0.1:3000&quot;, // 代理地址\n        changeOrigin: true,     // 域名跨域\n        secure: false,          // https跨域\n        pathRewrite:{&quot;^/api&quot;: &quot;&quot;} // 路径重写, 将路径中的api替换为空\n}]\n--&gt;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div><h2 id="_02-启动node服务器" tabindex="-1"><a class="header-anchor" href="#_02-启动node服务器" aria-hidden="true">#</a> 02 启动node服务器</h2><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;http&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nhttp<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">&quot;/api/user&quot;</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> req<span class="token punctuation">.</span>method<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n        res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n            <span class="token string">&quot;Content-Type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;text/plain; charset=utf-8&quot;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">&quot;知播渔666&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">&quot;/api/login&quot;</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> req<span class="token punctuation">.</span>method<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n        res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n            <span class="token string">&quot;Content-Type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;text/plain; charset=utf-8&quot;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">&quot;指趣学院666&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_03-前端打包启动serve" tabindex="-1"><a class="header-anchor" href="#_03-前端打包启动serve" aria-hidden="true">#</a> 03 前端打包启动serve</h2><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>cnpm <span class="token function">install</span> jquery\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">&quot;jquery&quot;</span><span class="token punctuation">;</span>\n\n<span class="token comment">/*\n当前发送请求的地址: http://127.0.0.1:9090/user\n服务端的地址:       http://127.0.0.1:3000/user\n* */</span>\n$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/user&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/login&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="_04-配置" tabindex="-1"><a class="header-anchor" href="#_04-配置" aria-hidden="true">#</a> 04 配置</h2><p><code>webpack.config.js</code></p><pre><code>devServer: {\n    contentBase: &quot;./bundle&quot;,\n    open: true,\n    port: 9090,\n    /*\n    proxy: {\n        // 以下配置的含义:\n        // 当我们在代码中发送请求到/user的时候, devServer就会自动将我们请求的地址替换为\n        // http://127.0.0.1:3000/user\n        &quot;/user&quot;: {\n            target: &quot;http://127.0.0.1:3000&quot;,\n            changeOrigin: true,     // 域名跨域\n            secure: false,          // https跨域\n        },\n        &quot;/login&quot;: {\n            target: &quot;http://127.0.0.1:3000&quot;,\n            changeOrigin: true,     // 域名跨域\n            secure: false,          // https跨\n        },\n        &#39;/api&#39;: {\n    \t\ttarget: &#39;https://dev-health.csih.cn/api&#39;, // 测试环境\n    \t\tchangeOrigin: true,\n    \t\tpathRewrite: {\t\t\t// 路径重写--来自番茄树\n      \t\t\t&#39;^/api&#39;: &#39;&#39;\n    \t\t}\n  \t\t}\n    }\n     */\n</code></pre>',11),t={render:function(n,s){return p}}}}]);