解决ajax跨域的几种方法

我们都知道,浏览器本身为了安全考虑,做了一个同源策略。同源即:协议+域名(ip)+端口均相同,则为同源,包括localhost != 127.0.0.1。

在前后端没有进行分离开发的时候,一个web项目里面,因为在同一个com文件夹,前后端的交互,尤其是ajax的访问是在本域内,是不存在跨域的。但是为了实现程序开发的高效率和分工合作,前后端分离开发,越来越成为流行趋势。更重要的是,前后端分离部署,更便利于对项目高并发、负载均衡等性能的调优。

也正是这个开发趋势,再加上同源策略限制,反而引出了跨域问题。那么…

解决跨域的方法

1. jsonp(只支持get请求)

2. CORS(后台设置响应头)

 - Access-Control-Allow-Origin: *    

3. chrome浏览器设置

- 安装插件【Allow-Control-Allow-Origin: *】  
- 右击浏览器--属性--快捷方式--目标,在引号内加参数--disable-web-security  

4.nginx配置

- 下载安装nginx
- 打开nginx安装位置,找到cong/nginx. conf文件打开进行配置,如下:
1、服务器配置
server {
    listen    端口号;
    server_name  localhost;  监听域名   

    1.1 配置前端项目的地址  
    location / {
         root 你的项目路径; 
         index 主页; 
    }

    1.2 下面配置服务器的地址,服务程序会自动进行代理转发
    location /test{      匹配请求路径
         proxy_pass   http://ip:port; 真正要访问的域名
    }  
}

ps: 配置注意事项

1、每项配置最后都必须加分号;
2、proxy_pass配置http://ip:port与http://ip:port/ 的区别:
前者:去配置的root目录下匹配页面,即本机项目位置
后者: 去真正服务器的根目录下面匹配页面,找不到则报404

拓展nginx

  • nginx是一个轻量的Web HTTP代理服务器、反向代理服务器。
  • 如果A想从C得到一些数据,但是不能直接拿到,则通过B拿到返回给A,此时B是A的正向代理;
  • 如果A想从B获取一些数据,发了请求后,而B没有这些数据,实际是B从C获取的,那么C就是B的反向代理。
  • 正向代理代理的对象是客户端,反向代理代理的对象是服务器。

你可能感兴趣的:(前端开发)