目录

Vue项目的跨域问题：

Vue项目部署到nginx上的跨域问题解决

Vue项目的跨域问题：

    在使用Vue构建的前端工程中，访问本地不同ip与端口，都会存在跨域问题，下面给出一个使用代理解决的办法：

    在config目录的index.js文件中，添加：

    

    proxyTable: {
      '/api':{
        target:'https://api.douban.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

   在要访问该地址的时候这样写：

   

      axios.get('/api/v2/book/1220562').then(resp=>{
        console.log(resp)
      })

    原来的url是：https://api.douban.com/api/v2/book/1220562，现在就不应该这样写了。

    问题解决。

Vue项目部署到nginx上的跨域问题解决

    这还没完，现在我们要将项目部署到nginx上，此时原来可以访问的接口又访问不到了，所以这个时候还要对nginx进行设置。

		location /api {			
			proxy_pass https://api.douban.com/;			
			
		} 

    在nginx.conf文件的server节点下，加上以上代码即可。

vuecli3打包部署到nginx，跨域问题处理
一、vuecli3后目录的build和config文件夹都没有了，大部分合成在vue.config.js，具体配置看 https://cli.vuejs.org/zh/config

其中常见的跨域处理：

devServer: {
   proxy: {
     '^/proxy': {
       target: 'http://127.0.0.1:8100',
       changeOrigin: true,
       pathRewrite: {
         '^/proxy': ''
       }
     },
   }
 },


接口请求：

Vue.http.post(`${/proxy}/login/auth`).then()


打包：

npm run build

二、打包后访问会出现跨域问题，接下来使用Nginx反向代理实现ajax进行跨域访问：

首先去nginx下载http://nginx.org/en/download.html，解压到文件夹中（不含中文）
接着打开conf文件夹，右键选择nginx.conf编辑
编辑server内容为↓

server {
        listen       8085;#监听端口
        server_name  localhost;#代理服务地址

        add_header Access-Control-Allow-Origin *;

        location / {
            root H:/newCom/ofpms/static; #根目录!!,把这里路径设置为项目的根路径
            autoindex on;       #开启nginx目录浏览功能
            autoindex_exact_size off;   #文件大小从KB开始显示
            charset utf-8;          #显示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

        #开始配置我们的反向代理
        location /proxy{
           rewrite ^/proxy/(.*)$ /$1 break;
           include uwsgi_params;
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  http://127.0.0.1:8100;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }
    }


再把打包好的文件夹放到nginx下的html文件夹里

常见nginx命令：
start nginx.exe //启动nginx

nginx.exe -s reload //重载配置

nginx.exe -s stop //快速停止

nginx.exe -s quit //完整有序停止
如果已经打开Nginx,请使用命令重载配置,①停止->②重载配置->③启动

nginx: [error] CreateFile() “E:\nginx\nginx-1.9.3/logs/nginx.pid” failed

nginx: [error] Open() “E:\nginx\nginx-1.9.3/logs/nginx.pid” failed

解决方法:

使用命令创建/logs/nginx.pid文件:

nginx -c conf/nginx.conf

在浏览器中输入 http://localhost:8085/即可实现跨域访问

1、目的：vue+springboot 开放的同学，使用nginx代理，实现前后台分离部署

2、问题：vue打包后的静态页面和文件直接由nginx代理访问没有问题，但是请求接口时是请求不到的。

3、解决方案：

a)配置nginx:

server {

        listen       80;

        server_name  localhost

        location / {

            root   D:/static; #vue工程打包后的文件路径

            index  index.html;

        }

    location /api/ {    # 会将接口地址/api开头的全部替换文下边配置的地址

        proxy_pass http://localhost:8081/;            #接口服务地址

    }



       

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

    }

b)vue 打包配置：

配置var baseUrl = '/api';

保证打包后，请求的接口地址以/ws 开头



4、结果：

请求成功。



 

 

最近项目改版，前端使用了vue-elementui-admin模板，后端采用springboot，部署的话是使用nginx代理的；项目中最头痛的问题莫过于开发环境和生产环境的跨域问题了，下面列出我的解决方案：

首先配置vue.config.js文件，这是配置proxy做路径跳转，api和ams分别是项目的别名（注意：这里配置两个项目跳转路径还方便了有多个微服务的项目使用，不同的项目进行不同的配置即可），可以按照自己的喜好取，后面会讲到他们具体用在什么地方

 proxy: {
    '/api': {
      target: 'http://localhost:8091/',
      changeOrigin: true,
      ws:true,
      pathRewrite: {
        '^/api': ''
      }
    },
    '/ams': {
      target: 'http://localhost:8092/',
      changeOrigin: true,
      ws:true,
      pathRewrite: {
        '^/ams': ''
      }
    },
  },
  before: require('./mock/mock-server.js')
},

然后在src/util/request.js配置baseURL,这里我们配置"/"或者""都可以，意思是不在基础路径后面添加任何其他路径，若不存在多个微服务也可以在这里配置单个微服务的proxy里的别名例如"/api",那么其他请求接口里面就无需再做配置了



最后一步，配置每个请求的项目路径，在api包下面的每个需要发请求的地方配置

import request from '@/utils/request'


export function getRoutes(username) {
  return request({
    url: '/api/auth/loadRoutes',
    method: 'get',
    params: { "username":username }
  })
}

export function fetchList(query) {
  return request({
    url: '/ams/goods/queryGoods',
    method: 'get',
    params: query
  })
}




每个url的前面部分都是我们在vue.config.js里面进行配置的项目别名，springboot的后台的接口就只要配置项目别名后的路径即可

例如auth/loadRoute这个请求，后台controller是这样写的：



这样配置好了的话，我们开发环境的跨域问题就得到解决了，下面讲一下部署到服务器后的跨域解决方案。

我们使用的nginx部署vue项目（nginx安装与vue项目的打包还有springboot项目部署这里就不细说，网上方法很多），我这里用的是nginx1.16.1，在官网下载安装包即可，只需配置conf包下的nginx.conf文件即可，具体配置如下：

server {
        listen       9000;   //vue项目的访问端口
        server_name  localhost;//访问地址
		
        location / {
                root D:/tomcat/dist; //vue项目的部署路径
				index index.html index.htm;
        }
		
		 location ^~ /api/ {
            rewrite  ^/api/(.*)$ /$1 break;
			proxy_pass http://localhost:8091;	//api项目的访问地址，这里我的所有项目和nginx都是同一台服务器，若不同服务器请根据实际情况修改
		}
		
		location ^~ /ams/ {
            rewrite  ^/ams/(.*)$ /$1 break;		 
			proxy_pass http://localhost:8092;	 
		}

    }

至此，开发环境和生产环境的所有配置都OK了，把springboot项目，nginx启动起来，则可以正常访问了