解决前端开发环境中的的跨域问题

Posted paul123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决前端开发环境中的的跨域问题相关的知识,希望对你有一定的参考价值。

一、为什么会有跨越问题
是客户端浏览器同源策略导致的,就是浏览器不允许不同源的站点相互访问。试想一下要是没有这个,那站点里的安全信息如cookie,账号/密码等是不是很容易被其它站点获取。
二、解决思路
知道是客户端浏览器为了安全使用同源策略导致的,而服务端是没有这个限制的,那我们就只能通过服务端进行跨域了。不管是jsonp,core,还是代理的方式,都是需要服务配合的。哈哈,这也是为啥后端和生产环境下比较少听说跨域的问题,所以这里介绍前端开发环境中的几种解决方法。
三、解决方案
1.完全交予后端解决,配值请求头信息(core),前端什么都不用做,如express.js中配置如下,其它后端语言配置同理

app.all(‘*‘, function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",‘3.2.1‘)
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
);

2.使用nginx反向代理,在配置文件nginx.conf中找到server对象,更改项目地址root和配置代理地址proxy_pass,这个方法适合前端静态文件使用:

location / 
    root   D:/browseClient/dist;  #自己的前端项目地址
    index  index.html index.htm;

#解决跨域
location /api                                 # 自定义nginx接口前缀
    proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址
            proxy_redirect default;      
    #设置主机头和客户端真实地址,以便服务器获取客户端真实IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   

3.如果使用vue-cli搭建的项目,可以直接使用proxyTable模块,项目框架已经集成,找到配置文件在/confif/index.j,如下配置

//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:
    "/adv":
        target:"http://127.0.0.1:3000",//需要访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:
            ‘^/adv‘: ‘/‘//路径的替换规则
"/user":
        target:"http://127.0.0.1:3000",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:
            ‘^/user‘: ‘/‘//路径的替换规则
        
    

显然,大部分情况我们不可能为每个api接口都在这加一个规则,所以更好的配置是:

proxyTable: 
    ‘**‘: 
        target: ‘http://127.0.0.1:3000‘,
        changeOrigin: true,   //允许跨域
    

或者

proxyTable: [
    context: [‘/**‘],
    target: ‘http://127.0.0.1:3000‘,
    changeOrigin: true,  //允许跨域
]

是不是方便了很多
4.其它,如jsonp是通过接口回调的方式实现跨域,这个现在已经用的少了。window.postMessage() 是HTML5的一个接口,专注实现不同窗口不同页面的跨域通讯。这些是对单个接口或者页面层面的跨域,使用也简单就不详细说了。

以上是关于解决前端开发环境中的的跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

nodejs 代理 解决开发环境跨域问题

前端开发:Mac环境的Chrome浏览器设置跨域请求的SameSite解决方法

Vue + SpringBoot + nginx:开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题

Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题

Vue-cli proxyTable 解决开发环境的跨域问题

Vue-cli proxyTable解决开发环境的跨域问题