Nginx--跨域

快来打我* 2022-12-20 02:30 89阅读 0赞

原文网址：[Nginx--跨域\_IT利刃出鞘的博客-CSDN博客][Nginx--_IT_-CSDN]

# **其他网址** #

> [nginx配置，解决跨域问题 - 《Vuejs 中文教程》 - 书栈网 · BookStack][nginx_ - _Vuejs _ - _ _ BookStack]

**简介**

> 开发的时候, vue+webpack 会通过npm run dev命令, 跑起一个 “开发服务器”, 这个server中有一个代理，可以进行跨域。但是在生产环境中, 发起请求的时候, 就不存在代理服务器,不存在开发服务器（dev server）了，所以会出错。

# **开发环境跨域** #

> 见：[Vue基础系列--axios\_feiying0canglang的博客-CSDN博客][Vue_--axios_feiying0canglang_-CSDN]=> 跨域方法：devServer(开发服务器代理)

# **生产环境跨域** #

本处对上边“开发环境跨域”进行改造，使用Nginx进行生产环境跨域。

### 代码 ###

**说明**

> **之前所有代码都不改变**。（本处为了清晰，将上文中的代码拷贝过来）

**router/index.js**

>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import Axios from 'axios';
>     import VueAxios from 'vue-axios';
>     import FormSubmit from "@/components/FormSubmit";
>     
>     Vue.use(Router)
>     Vue.use(VueAxios, Axios);
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/form_submit',
>           name: 'formSubmit',
>           component: FormSubmit
>         }
>       ]
>     })

**components/FormSubmit.vue**

>     <template>
>       <div>
>         <textarea v-model='content'>
>         </textarea>
>         <br/>
>         <input type='button' @click='submit' value='留言'/>
>       </div>
>     </template>
>     <script>
>     export default {
>       data() {
>         return {
>           content: ''
>         }
>       },
>       methods: {
>         submit: function () {
>           this.axios.post('/abc/interface/blogs/add_comment',
>             {
>               content: this.content
>             }
>           )
>             .then((response) => {
>                 alert("提交成功!, 刚才提交的内容是：" + JSON.stringify(response.data));
>               },
>               (response) => {
>                 alert("出错了")
>               }
>             )
>         }
>       }
>     }
>     </script>

> **config/index.js**
> 
> 注意：本处config/index.js无论如何配置都是无效的，因为生产环境中，我们部署到Nginx之后，根本不会用到开发服务器。下边这里，就算是使用默认配置，结果也是一样的。
> 
> 修改proxyTable
> 
>     ...
>     module.exports = {
>       dev: {
>         // Paths
>         assetsSubDirectory: 'static',
>         assetsPublicPath: '/',
>     
>         proxyTable: {
>           '/abc':{            // 要代理的接口名
>             target:'http://siwei.me',     // 要代理的接口地址
>             changeOrigin:true,            // 允许跨域
>             pathRewrite:{'^/abc':''}      // 接口名重写
>           }
>         },
>         ...
>     }
> 
> 当然，是可以配置多个代理接口的，就是普通的json格式。例如：
> 
>     ...
>     module.exports = {
>       dev: {
>         // Paths
>         assetsSubDirectory: 'static',
>         assetsPublicPath: '/',
>     
>         proxyTable: {
>           '/abc':{            // 要代理的接口名
>             target:'http://siwei.me',     // 要代理的接口地址
>             changeOrigin:true,            // 允许跨域
>             pathRewrite:{'^/abc':''}      // 接口名重写
>           },
>           '/def':{            // 要代理的接口名
>             target:'http://siwei.me',     // 要代理的接口地址
>             changeOrigin:true,            // 允许跨域
>             pathRewrite:{'^/def':''}      // 接口名重写
>           }
>         },
>         ...
>     }

### **配置Nginx** ###

**修改server为以下**（添加相关配置即可）：

>     http {
>         # 其他无关设置就不写了
>     	
>         server {
>             listen       8081;
>             server_name  localhost;
>     		# dist包的路径。(必须用/而不能用\)
>     		root         E:/work/Frontend_proj/demo_vue_manual/dist/;
>     
>             location / {
>     			# index所在位置的路径。(必须用/而不能用\)
>                 root   E:/work/Frontend_proj/demo_vue_manual/dist/;
>                 index  index.html index.htm;
>             }
>     		# 第一步,把所有的 /abc/interface  转换成:/interface
>     		location /abc{
>     		  rewrite    ^(.*)\/abc(.*)$    $1$2;
>     		}
>     		# 第二步，　把所有的 /interface 的请求，转发到 siwei.me/interface
>     		location /interface {
>     		  proxy_pass          http://siwei.me;
>     		}
>     		
>     		# 其他无关设置就不写了
>     	}
>     }

### **测试** ###

> **1.启动nginx**
> 
> start nginx
> 
> **2.访问**：[http://localhost:8081/\#/form\_submit][http_localhost_8081_form_submit]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]
> 
> **3.输入数据并提交**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

[Nginx--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109588750
[nginx_ - _Vuejs _ - _ _ BookStack]: https://www.bookstack.cn/read/happy_book_vuejs/nginx_fix_cross_domain_problem.md
[Vue_--axios_feiying0canglang_-CSDN]: https://blog.csdn.net/feiying0canglang/article/details/109554972
[http_localhost_8081_form_submit]: http://localhost:8081/#/form_submit
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/ce274221dc9e4cb2ad2c9cbb83d8bead.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201110213111767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70