vue项目实现跨域的三种方式

前后端分离的项目中，接口调用请求中常常存在跨域问题，要有效解决跨域问题，根据实际开发经验总结了一下三种常用方式：

一、Nginx配置解决跨域

Nginx配置文件中，需要配置server部分的listen、server_name、location参数

server { 
    #配置nginx端口及地址 需以此地址和端口访问         
    listen       8089;         
    server_name  localhost;   

    #配置前端访问地址         
    location / {             
        proxy_pass http://127.0.0.1:1234/;         
    }   

    #配置后端请求地址 为了加以区分将请求增加MCS_SERVER_DATA 
    #实际请求中没有MCS_SERVER_DATA 在第二行中去除         
    location /MCS_SERVER_DATA {             
        #add_header 'Access-Control-Allow-Origin' '*';             
        rewrite  ^/MCS_SERVER_DATA/(.*)$ /$1 break;             
        proxy_pass http://127.0.0.1:6606/;         
    }   
    #以下为默认配置         
    error_page   500 502 503 504  /50x.html;         
    location = /50x.html {             
        root   html;         
    } 
}

前端代码中，请求后端的统一地址改为：

http://127.0.0.1:8089/MCS_SERVER_DATA

此时，启动Nginx和所有前后端服务，浏览器请求 http://127.0.0.1:8089/ 时，Nginx即将请求自动转发至 http://127.0.0.1:1234/ ，请求后端时，将请求自动转发至 http://127.0.0.1:6606/实现跨域请求

二、Vue前端配置跨域 config/index.js配置文件中dev下配置

#前端访问地址和端口 
host: '127.0.0.1', 
port: 1234, 
proxyTable: { 
    #当指向此关键字的请求时进行请求转发 
    '/MCS_SERVER_DATA':{ 
        #请求转发目标地址 
        target:"http://localhost:6606", 
        ws:true, 
        #是否允许跨域 
        changeOrigin:true, 
        pathRewrite:{ 
            #将地址中MCS_SERVER_DATA移除 
            '^/MCS_SERVER_DATA':'/' 
        } 
    } 
}

向后端请求的统一地址改为 http://127.0.0.1:1234/MCS_SERVER_DATA

三、后端添加注解 @CrossOrigin 此注解加到后端服务中，添加到方法，实现方法的跨域，添加到类，实现类中所有方法的跨域；