前后端分离后遇到了跨域访问的问题;

angular1中使用proxy很麻烦,最后还是失败结束;最后总结3种方法如下;

本人使用的第一种方法,只是开发环境下使用很方便!

1:禁掉谷歌的安全策略(Turn off CORS)

For Windows 进入谷歌浏览器的安装目录下(我的目录如下 C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe);然后命令行输入

--args --disable-web-security

 C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --args --user-data-dir="C://Chrome dev session" --disable-web-security

可以将上述代码写进记事本保存为 .bat后缀名每次点击就可以启动了;

For OSX, open Terminal and run:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

For Linux run:

$ google-chrome --disable-web-security

以上方法便可以开启一个关闭掉安全策略的浏览器(谷歌为例);这样就可以进行跨域访问了;

2:使用谷歌插件()

点击安装(请自备梯子或者博客有梯子

3:使用proxy

请参考http://oskarhane.com/avoid-cors-with-nginx-proxy_pass/

Avoid CORS with Nginx proxy_pass

I recently had to make cross origin AJAX requests (CORS), which was fine since I had control over the API server and simply adding these headers will make modern browsers ask the API server for permission and then make the request.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,PUT,DELETE
Access-Control-Allow-Headers: Authorization, Lang

But, of course, Internet Explorer want to be a pita and IE 8 & 9 does not support this (a part of it is supported, check out this table). And I have to support IE 9 at least.

So, nginx to the rescue like many times in the past.

I want to configure Nginx to take local requests made to /api/ and forward those to the api located at http://apiserver.com.

This is what I have in Nginx since the website is up and running (for all browsers except IE 8&9).

server {
charset UTF-;
listen ;
root /home/web/myclient;
index index.html;
server_name myclient.com; location ~ /\. {
deny all;
} location / {
try_files $uri;
}
}

It basically says: listen to myclient.com on port 80 and deny all requests made to files starting with a dot and serve all other files matching filenames from the dir /home/web/myclient.

Alright, lets change so calls starting with /api/ forwards the call to the API server (not including the /api/ part of the requested path). The trailing slash on the /api/ and proxy_pass http://api_server/; are important here.

We’re adding an upstream and a location block.

upstream api_server {
server apiserver.com;
} server {
charset UTF-;
listen ;
root /home/web/myclient;
index index.html;
server_name myclient.com; location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://api_server/;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_redirect off;
} location ~ /\. {
deny all;
} location / {
try_files $uri;
}
}

Now we just restart the server and it should work to make AJAX calls to http://myclient.com/api/users to get all users.

----------------------------------------------------------

|                 转载文章请注明出处!               |

----------------------------------------------------------

前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )的更多相关文章

  1. VUE在开发环境下实现跨域

    1. 跨域设置 VUE项目的 config文件夹下index.js文件中修改 dev: proxyTable中的内容(默认是没有内容的): 添加内容: '/list': { target: 'http ...

  2. vue2.0开发环境下解决跨域问题

    1.找到vue 项目下的配置文件 /config/index.js 2.找到 proxyTable 配置项 proxyTable: { '/api': { target: 'http://www.xx ...

  3. vue dev 环境下的跨域访问

    概述:被dev环境下的跨域弄晕了好几天,build环境还在研究中 1.config--->index.js---->module.exports---->dev 2.在main.js ...

  4. 关于vue项目中axios跨域的解决方法(开发环境)

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  5. springMVC前后端分离开发模式下支持跨域请求

    1.web.xml中添加cors规则支持(请修改包名) <filter> <filter-name>cors</filter-name> <filter-cl ...

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

    使用vue+vue-cli+axios+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用axios请求数据,控制台总是报405错误和跨域错误 错误 405? 没见过!! ...

  7. Windows 环境下分布式跨域Session共享(转)

    出处:http://www.cnblogs.com/stangray/p/3328092.html 为什么还是那句话,在网上找了N篇Session共享,但真正可以直接解决问题的还是没有找到. 一.以下 ...

  8. Windows 环境下分布式跨域Session共享

    为什么还是那句话,在网上找了N篇Session共享,但真正可以直接解决问题的还是没有找到. 一.以下为本人亲测,为防止环境不一致,对本文产生歧义,限定环境如下: 1. IIS7.0 2. Asp.ne ...

  9. vue-cli 初始化项目时开发环境中的跨域问题

    最近刚刚完成自己的毕业设计(基于Vue的信息资讯展示与管理平台),于是想整理一下过程遇到的一些问题. 项目基于Vue开发,使用 Vue-cli 初始化项目文件目录时默认占用8080端口,而我又想使用 ...

随机推荐

  1. win10中让Visual Studio默认使用Administrator权限运行

    https://stackoverflow.com/questions/9654833/how-to-run-visual-studio-as-administrator-by-default Win ...

  2. python spark kmeans demo

    官方的demo from numpy import array from math import sqrt from pyspark import SparkContext from pyspark. ...

  3. Statspack的使用

    Statspack是Oracle 8i以上提供的一个非常好的性能监控与诊断工具,基本上全部包含了BSTAT/ESTAT的功能,更多的信息可以参考附带文档$ORACLE_HOME/rdbms/admin ...

  4. 深入理解Oracle索引(1):INDEX SKIP SCAN 和 INDEX RANGE SCAN

    ㈠ Index SKIP SCAN                当表有一个复合索引,而在查询中有除了索引中第一列的其他列作为条件,并且优化器模式为CBO,这时候查询计划就有可能使用到SS       ...

  5. 17.QT键盘

    mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> 5 #include <Q ...

  6. java类List及List遍历器的代码

    从某个程序中截取的一个示例代码: List<User> users = userDao.selectAll(); //mybatis java orm Iterator<User&g ...

  7. Selenium键盘鼠标操作总结

    鼠标操作 org.openqa.selenium.interactions.Actions 1.给元素设置焦点. 有时对于a标签等,为了不跳转到别的链接,但是需要设置焦点时就可使用. action.m ...

  8. Oprofile分析(android oprofile性能分析)

    一.内核支持: make menuconfig 1.评测菜单中启用 Oprofile ,在 .config 文件中设置?CONFIG_PROFILING=y?和?CONFIG_OPROFILE=y 2 ...

  9. 前端学习笔记-CSS

  10. vue中slot的用法案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...